homepage Welcome to WebmasterWorld Guest from 184.73.87.85
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
background gradients and background images together
dupalo




msg:4527944
 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

 

rainborick




msg:4527957
 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"); }
</style>
<![endif]-->

dupalo




msg:4528544
 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

rainborick




msg:4528606
 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.

dupalo




msg:4529425
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved