CODEWITHSUNDEEP
htmlcssinternet-explorer
Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Combine a background image and CSS3 gradients in IE

I want to combine background image and gradient. It should work in IE. my image is 3px width and 3px height. I am planning to give repeat for the background. How can we done it for Internet Explorer ???

Thanks in Advance

Upvotes: 2

Views: 641

Answers (2)

Acelasi Eu
Acelasi Eu

Reputation: 914

background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background-image: url(IMAGE_URL),    -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background-image: url(IMAGE_URL),     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image: url(IMAGE_URL),      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: url(IMAGE_URL),         linear-gradient(top, #444444, #999999); /* W3C */

First 2 lines are the fallback for any browser that doesn't do gradients. See notes for stacking images only IE < 9 below.

Line 1 sets a flat background color.

Line 2 sets the background image fallback.

The rest set a background image and gradient for specific browsers.

Line 3 is for old webkit browsers.

Line 4 is for newer webkit browsers.

Line 5 is for Firefox 3.6 and up.

Line 6 is for Internet Explorer 10.

Line 7 is for Opera 11.10 and up.

Line 8 is what one day all the browsers will hopefully use.

See http://www.w3.org/TR/css3-background/#layering for more information about it.

Also see http://css3please.com for cross-browser css3 templating. Currently it doesn't allow you to do multiple backgrounds with gradients, but it gives you the browser prefixes and is kept up to date.

Stacking images ONLY (no gradients in the declaration) For IE < 9

IE9 and up can stack images this same way. You could use this to create a gradient image for ie9, though personally, I wouldn't. However to be noted when using only images, ie < 9 will ignore the fallback statement and not show any image. This does not happen when a gradient is included. To use a single fallback image in this case I suggest using Paul Irish's wonderful Conditional HTML element along with your fallback code:

.lte9 #target{ background-image: url(IMAGE_URL); }

Upvotes: 1

Spudley
Spudley

Reputation: 168655

If you need to target IE versions IE9 or earlier, they do not support CSS gradients.

There are work-arounds using filter and other hacks, but you will struggle to get those working if you want a background image as well.

My advice, therefore, is to use the CSS3Pie polyfill script. This library adds gradient support to older IE versions. It should be able to do what you want.

You'll end up with code like this in your CSS:

#myElement {
    background: url(bg-image.png) #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png), -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: url(bg-image.png), -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: url(bg-image.png), -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png), -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: url(bg-image.png), linear-gradient(#CCC, #EEE); /*CSS3-compilant browsers*/
    -pie-background: url(bg-image.png), linear-gradient(#CCC, #EEE); /*PIE*/
    behavior: url(PIE.htc);
}

Please see the CSS3Pie documentation for further info.

Upvotes: 0

Related Questions