IE doesn't support all CSS level 3 properties.
The workaround is to put one background-image in the html selector and the other in your body selector like this:
background: url(../Images/bg_bp88.jpg) no-repeat center top;
background: url(../Images/bg_jl6x.jpg) repeat-x left top;
Hi Nancy O
Tried this and it works again in all browsers, except IE. I am really at a loss here. Any ideas?
Thank you for such a rapid response.
Which version of IE are you testing with?
Can I see a link to your page? It's always easier to trouble shoot when we can actually see everything in our browsers.
I just checked and I am using IE 10. I'm previewing through the PREVIEW option on Dreamweaver as the site is being switched from a sitebuilder site to a Linux platform web hosting, thus the reason I am scrambling to get this done. I did switch the code per your example. I don't have anyplace to upload it yet. IE 10 is ignoring completely the two images and is spacing down from the top correctly, but just putting in the background color and not the "Special class" either. I have attached two screen shots, one from Chrome and one from IE.
Why can't IE play nice like the other browsers....... Thank you soooooo much for helping me.
font-family: Verdana, Arial, Helvetica, sans-serif;
background-position: center top;
And the HTML5 code:
<title>2013 Appreciation Day-Sock Hop</title>
<link href="css/twoColFixHdr.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<div class="special">Our Vietnam Vets</div>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="event.html">Event Entertainment</a></li>
<li><a href="vva20.html">VVA Chapter 20</a></li>
<li><a href="thank.html">Thank You</a></li>
<li><a href="apprec2012.html">Appreciation Day 2012</a></li>
<li><a href="vietStat.html">Vietnam Statistics</a></li>
<li><a href="memories.html">Gallery of Memories</a></li>
<li><a href="vetOrg.html">Veterans Organizations</a></li>
<!-- end .sidebar1 --></div>
<h1>2013 Appreciation Day-Sock Hop</h1>
1 person found this helpful
Can you see 2 background images in this example?
A green pattern should fill the page. A purple & white pattern is repeated downward.
I didn't see any purple & white pattern and I checked on FF, Chrome and Safari on a Mac. All browsers upto date.
Oooops. My bad. Forgot to upload it. Try it again -- in IE10 if you have it.
Okay, I think what I am doing wrong is putting the background color in the HTML and no hack for IE. I just added your IE9 hack and now the header text is coming up where it didn't before. And now I'm getting a full white background. I'll use your example and play with it. Thanks and I'll be back to let you know what happens.
I really don't mind working at it with a good push in the right direction! LOL
Again thank you and I will come back and vote!! And once up will share the new website with you!
Just got my good friends at GoDaddy to help me set up a testing site and am waiting for their servers to finish processing. Then I can give you a link to the page. I tried the hack and it took out everything and then none of the browsers worked correctly. So went back to the drawing board, working in everything but IE. As soon as it's up I will provide a link.
Daisy, There's hope for everyone .
The good news is it works in IE9, FF20, Chrome, Safari and other CSS level 3 supporting devices.
The bad news is that multiple-background images on the same selector do not display in pre-IE9 because they are not web standards compliant browsers. Never were, never will be.
The workaround would be to feed the lesser browsers an IE conditional comment with a single background image.
Or break things up some more by applying single background-images to the html, body and .header selectors.
I just reloaded the whole thing and it's working in all browsers now. Thanks to you. Still in the testing locale but here is the link: http://www.dannybsound.com/ourvietnamvets/index.html
Your guidance has been an immense help, I would never have figured it out. I did not use and hacks either and it seems to work great!
Thank you sooooooooooooo much!!!