Background transparent when 'background' is used
 

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

Re: Background transparent when 'background' is used
 

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

Re: Background transparent when 'background' is used
 

Michael Winter wrote:
> 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.

Re: Background transparent when 'background' is used
 

"Michael Winter" <m.winter@blueyonder.co.uk> wrote in message
news:Yw8Sg.25163$r61.5892@text.news.blueyonder.co. uk...
> 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.

Re: Background transparent when 'background' is used
 

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'

Value: <color> | transparent | inherit
Initial: transparent

> 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