Why multiple backgrounds in css

[tshad]

I was looking at a jquery demo and found that a lot of their css tags had a bunch of backgrounds (one for each type of browser that might access the site).

.main_menu_hover{
    background: #656565; /* Old browsers */
    background: -moz-linear-gradient(top, #656565 0%, #676767 1%, #696969 38%, #747474 50%, #6c6c6c 77%, #676767 99%, #676767 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#656565), color-stop(1%,#676767), color-stop(38%,#696969), color-stop(50%,#747474), color-stop(77%,#6c6c6c), color-stop(99%,#676767), color-stop(100%,#676767)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #656565 0%,#676767 1%,#696969 38%,#747474 50%,#6c6c6c 77%,#676767 99%,#676767 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #656565 0%,#676767 1%,#696969 38%,#747474 50%,#6c6c6c 77%,#676767 99%,#676767 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #656565 0%,#676767 1%,#696969 38%,#747474 50%,#6c6c6c 77%,#676767 99%,#676767 100%); /* IE10+ */
    background: linear-gradient(to bottom, #656565 0%,#676767 1%,#696969 38%,#747474 50%,#6c6c6c 77%,#676767 99%,#676767 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#676767',GradientType=0 ); /* IE6-9 */

}

Why do you need all of them?

Would the last one override all the others?

Thanks,

Tom

 

[ChrisHirst]

Not if the browser supports multiple backround images

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[darryncooke]

this is for cross browser rendering of CSS gradients.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[vacunita]

Each background is for a different browser to render the gradient. Different browsers have different ways of rendering it. And not all browsers will support the last one which is the CSS3 way of doing that should work in the more modern browsers.

In other words each bowser needs different code to get them to render a gradient for now.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech