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; }