what does background: transparent url(); do?

Question

I saw a css code where it was like

   body { background: transparent url ('background.jpg') repeat scroll;} 

What does the transparent value do? I tried google'ing about this, but no help. Wouldn't background.jpg just override it?

Thank you.

Answer 1

transparent is the color. An element can have both a background image and a background color.

The above is equivalent to:

body {
    background-color: transparent;
    background-image: url('background.jpg');
    background-repeat: repeat;
    background-attachment: scroll;
}

The color is important in general if e.g. the background image fails to load, or the image contains transparent regions, or the image does not repeat to fill the entire area (which is admittedly not the case in your example).

However, since transparent is the "initial value", it is never necessary when using the background shorthand, since the shorthand automatically sets all unspecified properties to their initial value.

Thus, the only use case where transparent makes sense as a background color involves:

1. not using the shorthand, but instead directly using the background-color property;
2. using it to override another selector applying directly to that element.

An example would be

body.foo { background-color: blue; }
body.foo.bar { background-color: transparent; }

Answer 2

Actually, it is not required.

http://www.w3.org/TR/CSS21/colors.html#background
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.

Since background-color's initial value is transparent, it is applied implicitly when setting background:url(...);

More precisely, your style rule is equivalent to

background-color: transparent;
background-image: url(...);
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;

in both cases.

However, many authors (including myself) prefer to explicitly set the value

• for readability
• to prevent any browser bugs, or simply
• because they don't know better