Background transparent when 'background' is used

[JWL]

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

 

[Michael Winter]

JWL wrote:

[snip]

#wrap2 {
width: 800px;
background-color: #FFF;
background: url(images/line.gif) repeat-y;
}

Suddenly, wrap2 becomes transparent ...

The shorthand property can also be used to specify the colour, but as
you haven't included it, the initial value of transparent is used
instead. That is:

background: url(images/line.gif) repeat-y;

is equivalent to:

background: transparent url(images/line.gif) repeat-y scroll 0% 0%;

As this declaration follows the explicit background-color property
declaration, it overrides the value set there.

This sort of thing applies to all shorthand properties. Either swap the
declaration order, or include the colour in the shorthand declaration.

[snip]

Mike

 

[JWL]

JWL wrote:

[snip]

#wrap2 {
width: 800px;
background-color: #FFF;
background: url(images/line.gif) repeat-y;
}

Suddenly, wrap2 becomes transparent ...

The shorthand property can also be used to specify the colour, but as
you haven't included it, the initial value of transparent is used
instead. That is:

background: url(images/line.gif) repeat-y;

is equivalent to:

background: transparent url(images/line.gif) repeat-y scroll 0% 0%;

As this declaration follows the explicit background-color property
declaration, it overrides the value set there.

This sort of thing applies to all shorthand properties. Either swap the
declaration order, or include the colour in the shorthand declaration.

[snip]

Mike

Doh!

It's so obvious now that you've pointed it out.

Thanks very much for your help.

 

[richard]

JWL wrote:

[snip]

#wrap2 {
width: 800px;
background-color: #FFF;
background: url(images/line.gif) repeat-y;
}

Suddenly, wrap2 becomes transparent ...

The shorthand property can also be used to specify the colour, but as you
haven't included it, the initial value of transparent is used instead.
That is:

background: url(images/line.gif) repeat-y;

is equivalent to:

background: transparent url(images/line.gif) repeat-y scroll 0% 0%;

As this declaration follows the explicit background-color property
declaration, it overrides the value set there.

This sort of thing applies to all shorthand properties. Either swap the
declaration order, or include the colour in the shorthand declaration.

[snip]

Mike

Interesting. I've never had the problem with transparency. This also is the
first time I've read where transparent is an attribute of background. Or at
least is mandated as having that effect when not used.
Any attribute that is not used, has no effect. That's the way I understand
it.

 

[Michael Winter]

richard wrote:

[snip]

This also is the first time I've read where transparent is an
attribute of background.

'background'

Value: [<'background-color'> || <'background-image'>
|| <'background-repeat'>
|| <'background-attachment'>
|| <'background-position'>] | inherit


'background-color'

Or at least is mandated as having that effect when not used.

Given a valid declaration, the 'background' property first
sets all the individual background properties to their initial
values, then assigns explicit values given in the declaration.

[All of the above are quotes from section 14.2.1 Background properties]

Any attribute that is not used, has no effect.

When values are omitted from a shorthand form, each "missing"
property is assigned its initial value ....
-- 1.4.3 Shorthand properties

[snip]

Mike