CODEWITHSUNDEEP
cssbackground-imagefirefox7
Caroline Elisa
Caroline Elisa

Reputation: 1246

Background image not centred in Firefox7 for Windows

Using Browserlab, it appears that the background image is not centred in Firefox7 for Windows on this site: http://carolineelisa.com/wp/boy/

The css I am using is below, as is a screenshot.

Any ideas how I can fix this?

Thanks!

CSS:

html {
    background: url(images/background.jpg) no-repeat top center #0f0c0b;
}

enter image description here

Upvotes: 1

Views: 49

Answers (2)

Indranil
Indranil

Reputation: 2471

Your html page background keeps centering itself even if the browser size is < 980px, but the container aligns itself to the left of the viewport, once the size is lesser.

Now, to address your issue, you should align the html's background to left and top if the width is lesser than 980px. So, with some responsive css:

@media screen and (max-width: 980px) {
    html{
      background-position: left top;
    }
}

Try this?

Upvotes: 0

Guffa
Guffa

Reputation: 700592

The first value for the position is the horisontal value, the second is the vertical. So swap top and center:

background: url(images/background.jpg) no-repeat center top #0f0c0b;

Standards reference: http://www.w3.org/TR/css3-background/#ltbg-positiongt

Upvotes: 0

Related Questions