Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Background transparent when 'background' is used

Reply
Thread Tools

Background transparent when 'background' is used

 
 
JWL
Guest
Posts: n/a
 
      09-26-2006
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
 
Reply With Quote
 
 
 
 
Michael Winter
Guest
Posts: n/a
 
      09-26-2006
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
 
Reply With Quote
 
 
 
 
JWL
Guest
Posts: n/a
 
      09-26-2006
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.
 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      09-26-2006

"Michael Winter" <(E-Mail Removed)> wrote in message
news:Yw8Sg.25163$(E-Mail Removed). 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.


 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      09-26-2006
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Making a transparent background using GDI+ Nathan Sokalski ASP .Net 0 06-26-2005 07:35 PM
Resizing a transparent image adds gray background Oleg Ogurok ASP .Net 0 01-27-2005 05:18 AM
Making Background of an image control transparent to view designed Gif =?Utf-8?B?Um9iZXJ0?= ASP .Net 0 04-06-2004 12:21 PM
How do i change background color to transparent Ather Ali Shaikh ASP .Net 1 12-04-2003 07:00 PM
Help: Hyperlink transparent background programatically? VB Programmer ASP .Net 0 06-30-2003 08:35 PM



Advertisments