homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

background gradients and background images together

Msg#: 4527942 posted 10:13 pm on Dec 13, 2012 (gmt 0)

Hi there, I have this html
<div id="myDiv">

abd this css

/*border:1px solid green;*/
padding:10px 0 0 20px;
background: url("image.png");
border:1px solid #d4d1c8;
/* IE10 Consumer Preview */
background-image:url("image.png"), -ms-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* Mozilla Firefox */
background-image: url("image.png"), -moz-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* Opera */
background-image:url("image.png"), -o-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: url("image.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #F3F4F4), color-stop(1, #FFFFFF));
/* Webkit (Chrome 11+) */
background-image: url("image.png"), -webkit-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: url("image.png"), linear-gradient(to top, #F3F4F4 0%, #FFFFFF 100%);
background-position:100% 60%;

Now, I am having a really big problem:
IE7 and IE8 that don't show the background image for whatever reason. I kind of expect that therefore I purposely left this line at the top background: url("image.png") thinking I could use it as fallback in case a browser doesn't support what seems to be effectively a double background image (the second being the gradient).
I am a bit lost, how would I solve this please? I need the background image to show up in every browser



WebmasterWorld Senior Member 10+ Year Member

Msg#: 4527942 posted 11:26 pm on Dec 13, 2012 (gmt 0)

Older versions of IE don't support multiple background images, so they ignore attempts to use them - which can cause those browsers to ignore previous valid settings. You need to use conditionals to override or supplement your CSS3 background settings, as in:

<!--[if lt IE 9]>
<style type="text/css">
#myDiv { background: url("image.png"); }


Msg#: 4527942 posted 12:03 am on Dec 16, 2012 (gmt 0)

Hi rainborick, thanks for that. Is there somewhere it says that IEs don't support that (not that I don't believe it of course but...it's a long story, I need to show somebody that this is officially stated somewhere!). About fixing the issue then, I will do as you suggested and use the above fix. Now, when you say "older version of IE", I presume you mean IE7 and 8?


WebmasterWorld Senior Member 10+ Year Member

Msg#: 4527942 posted 4:24 am on Dec 16, 2012 (gmt 0)

There's an excellent CSS compatibility resource online called "Can I Use". A quick search will point you to it. And, yes, I meant any version prior to IE9.


Msg#: 4527942 posted 9:39 pm on Dec 18, 2012 (gmt 0)

thanks for the link, really useful tool.
I tried the code and it works a treat, thanks a lot!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved