CSS multiple background

Question

I have a site and I wanted to change it's background. I want to put a background on top and bottom.

Here is the CSS code:

div.bg_top {
  background-image: url('bg_top.jpg');
  background-repeat: no-repeat;
  background position: top center;
}

div.bg_bottom {
  background-image: url('bg_bottom.jpg');
  background-repeat: no-repeat;
  background position: bottom center;
}

HTML code:

<div class="bg_top">
  <div class="bg_bottom">
    Content Here.
  </div>
</div>

is that correct?

Answer 1

It should work if you fix the background-position:

background-position: center top;

Answer 2

i'd suggest using CSS short-hand for best practice

.bg_top { background: url('bg_top.jpg') no-repeat top center; }

.bg_bottom { background: url('bg_bottom.jpg') no-repeat bottom center; } 

Answer 3

As Lance said just change the background position: to background-position: it should work fine.

But my concern is that, the way you have given the backgrounds, with different resolutions the two background images may overlap and it will screw all the design. So, to make it compatible with all the resolutions you need to choose any other option. I will suggest use any image editor and place the images as you want and make one image and then use that image as the background.

Answer 4

To avoid changing the html, you can also put one of the backgrounds in the html and the other in the body. And use a min-height (height for IE6) to avoid overlap.