1

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

Caroline Elisa
  • 1,246
  • 6
  • 18
  • 35

2 Answers2

0

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

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
0

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?

Indranil
  • 2,451
  • 1
  • 23
  • 31
  • Thanks Indranil, but that doesn't make a difference in this case. – Caroline Elisa Dec 22 '11 at 05:26
  • Try putting the entire background property in there, and try doing an `!important`? Also, this should go after the main html declaration. – Indranil Dec 22 '11 at 05:30
  • Cool, I got it working thanks. But I'm afraid that the background image needs to be centred, as it has the logo on it! Maybe a silly way to do it, but I'm trying to cut down on total image file size. – Caroline Elisa Dec 22 '11 at 05:45
  • I just realised I can get around the problem by having a different image for the devices under 980px, and the logo is in the right place. Thanks for the guidance! – Caroline Elisa Dec 22 '11 at 05:56