Question

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;
}

Answer 1

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?