what does background: transparent url(); do?

background, css

Solution

`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:

- not using the shorthand, but instead directly using the `background-color` property;

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

Problem

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.

Original source