Background transparent when 'background' is used

Discussion in 'HTML' started by JWL, Sep 26, 2006.

  1. JWL

    JWL Guest

    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
    JWL, Sep 26, 2006
    #1
    1. Advertising

  2. 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
    Michael Winter, Sep 26, 2006
    #2
    1. Advertising

  3. JWL

    JWL Guest

    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.
    JWL, Sep 26, 2006
    #3
  4. JWL

    richard Guest

    "Michael Winter" <> wrote in message
    news:Yw8Sg.25163$...
    > 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.
    richard, Sep 26, 2006
    #4
  5. 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
    Michael Winter, Sep 26, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. VB Programmer
    Replies:
    0
    Views:
    382
    VB Programmer
    Jun 30, 2003
  2. Ather Ali Shaikh

    How do i change background color to transparent

    Ather Ali Shaikh, Dec 4, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    4,321
    Chris Jackson
    Dec 4, 2003
  3. =?Utf-8?B?Um9iZXJ0?=
    Replies:
    0
    Views:
    445
    =?Utf-8?B?Um9iZXJ0?=
    Apr 6, 2004
  4. Oleg Ogurok
    Replies:
    0
    Views:
    777
    Oleg Ogurok
    Jan 27, 2005
  5. Nathan Sokalski

    Making a transparent background using GDI+

    Nathan Sokalski, Jun 26, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    515
    Nathan Sokalski
    Jun 26, 2005
Loading...

Share This Page