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

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

• maček: The use of short-hand does not automatically make this a "best practice". And don't bother opening the "it keeps your stylesheet smaller" argument.
• pixeltocode: it helps you find CSS properties quickly, makes the code more readable and saves time while editing. if that's not best practice, please enlighten me macek.

Answer 2

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 3

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.

Answer 4

It should work if you fix the background-position:

background-position: center top;

• DisgruntledGoat: Should be center top actually. The horizontal one goes first, then the vertical one.
• Lance McNearney: @DisgruntledGoat - Sorry, fixed now. Most browsers will render it correctly in either order since it's such a common mistake.
• DisgruntledGoat: You're right - that's true for the string values since there's no chance of ambiguity (top is obviously the vertical). Though the order is vital for numeric values.