|
|
Posted by JWL on 09/26/06 11:32
Hi
Suppose I have two nested divs:
<div id="wrap"><div id="wrap2">
content
</div></div>
styled like this:
#wrap { background-image: url(images/bg.gif); }
#wrap2 { width: 800px; background-color: #FFF; }
Assuming there is some content to force height, the effect is:
+-----------------------+<-- browser window
|+---------+-----------+|
|| |xxxxxxxxxxx||
|| |xxxxxxxxxxx||<-- wrap2 (left) / wrap (right) xxx = bg image
|| |xxxxxxxxxxx||
|+---------+-----------+|
| |
+-----------------------+
Suppose I decide to have a background image in wrap2, say a solid
200px-wide line of colour to create a left 'gutter':
#wrap2 {
width: 800px;
background-color: #FFF;
background-image: url(images/line.gif); /* just a line of colour */
background-repeat: repeat-y;
}
The effect is what I'd expect, with the first 200px of wrap2 having the
colour of the image, and the remaining pixels of wrap2 being white. But
suppose I use the shorthand background property instead:
#wrap2 {
width: 800px;
background-color: #FFF;
background: url(images/line.gif) repeat-y;
}
Suddenly, wrap2 becomes transparent, and the background image of wrap
shows through where the background image of wrap2 is not shown. It looks
like this:
+-----------------------+
|+---------+-----------+|
||ooxxxxxxx|xxxxxxxxxxx||
||ooxxxxxxx|xxxxxxxxxxx||
||ooxxxxxxx|xxxxxxxxxxx||
|+---------+-----------+|
| |
+-----------------------+
However, if I place the background-color properly after the background
property, it starts to work again - with the white colour overriding
wrap's background image:
#wrap2 {
width: 800px;
background: url(images/line.gif) repeat-y;
background-color: #FFF;
}
+-----------------------+
|+---------+-----------+|
||oo |xxxxxxxxxxx||
||oo |xxxxxxxxxxx||
||oo |xxxxxxxxxxx||
|+---------+-----------+|
| |
+-----------------------+
So basically, if I use 'background', wrap2 becomes transparent. What is
the explanation for this? How do I ensure that the white background
colour of wrap2 always overrides the background image of wrap?
Thanks for looking
JWL
Navigation:
[Reply to this message]
|