Welcome to WebmasterWorld Guest from 23.20.238.193

Forum Moderators: not2easy

Message Too Old, No Replies

background gradients and background images together

     
10:13 pm on Dec 13, 2012 (gmt 0)




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


abd this css

#myDiv{
/*border:1px solid green;*/
/*width:940px;*/
padding:10px 0 0 20px;
height:160px;
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%;
background-repeat:no-repeat;
}


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
11:26 pm on Dec 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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"); }
</style>
<![endif]-->
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?
thanks
4:24 am on Dec 16, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
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!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month