CODEWITHSUNDEEP
css
Scott B
Scott B

Reputation: 40157

CSS hack for multiple background images

I'm using...

background:url(menu-bg.png) repeat-x, url(spot.gif) repeat; 
background:url(spot.gif)\0/;

To create multiple background images in Chrome, Safari and Firefox. The last directive (using the \0/ is for IE. Its a hack that allows the browsers that support multiple backgrounds to show them, but also allows IE (at least version 8) to show the main background image (spot.gif). Without it, IE8 doesn't render ANY background at all (not sure about IE7).

I don't like to have to use hacks, but this works for now. I dont remember where I found the \0/ hack originally or even why it works. How likely is it that the other browsers begin to recognize the \0/ and render that last directive instead of the multiple backgrounds preceeding it?

Upvotes: 2

Views: 1990

Answers (1)

Thomas
Thomas

Reputation: 3044

No hacking needed:

background:url(spot.gif);
background:url(menu-bg.png) repeat-x, url(spot.gif) repeat;

This way if the browser understands the second background declaration the first one will be overwritten otherwise the second one is ignored.

Upvotes: 4

Related Questions