What is the benefit of using the “transparent” value in the CSS background property before a url of a png?

Question

I have often seen stylesheets written where you have something like this:

#anyelement {
  background:transparent url(../img/filename.png) no-repeat left top;
}

The value in question is the "transparent" value - what is the benefit of using this value? I have never really used it with my own css files and my PNG images still seem to work fine in all browsers that support PNGs.

Can anybody shed some light on the use of this value??

Thanks!

Answer 1

If you're inheriting a background color from another declaration then that should clear it out.

Answer 2

Unless I’m missing something, using transparent in a background rule doesn’t have any effect.

When you use the background shorthand property, it always sets values for background-color, background-image, background-position and background-repeat. Any values you leave out of the rule will be set to their default values, which for background-color is transparent anyway.

See http://jsfiddle.net/CN2aJ/2/

Some people might prefer their CSS to be more explicit, and thus include transparent in there for clarity. But I don’t think it’ll ever affect how the page is displayed.

Answer 3

The transparent value in this example is the background color (or lack thereof).

Answer 4

The first part of the background attribute is the background color. This is the color that is shown if the background image is not found. Transparent just means that it shouldn't show a background color. Transparent is also the default btw.