I'm having a problem that I've never experience before. All of the sudden, My IE will not display my background images from my css. Everything works find in Firefox, but the only thing bieng rendered from my css are my text rules. Here's my css. It's a little ugly right now, but I'm still developing. I've never had this happen to me. When I grab an old project, and view an html file in IE, with linked css, NO problem. I'm not even running it from my inetpub>wwwroot folder or from my http://localhost/ directive. /* Default CSS Stylesheet for a new Web Application project BACKGROUND: url("images/layout/main_bg.jpg")White repeat-x center top;*/ BODY { BACKGROUND: url(images/layout/main_bg.jpg)White repeat-x center top; FONT-FAMILY: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 11px; MARGIN-LEFT: 0PX; MARGIN-RIGHT: 0PX; MARGIN-TOP: 0PX; MARGIN-BOTTOM: 0PX; PADDING-LEFT: 0PX; PADDING-RIGHT: 0PX; PADDING-TOP: 0PX; PADDING-BOTTOM: 0PX; } a:link { color: #000000; } a:visited { color: #600000; } a:hover { color: #ffffff; background-color: #333333; text-decoration: none; } a:active { color: #222556; } H1, H2, H3, H4, H5, TH, THEAD, TFOOT { COLOR: #003366; } H1 { font-family: Trebuchet MS, Verdana, Arial, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; text-decoration: none; word-spacing: normal; letter-spacing: normal; text-transform: none; } H2 { font-family: Trebuchet MS, Verdana, Arial, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; text-decoration: none; word-spacing: normal; letter-spacing: normal; text-transform: none; } .tdHeader { background: url(images/layout/gomovo_header.jpg)no-repeat left top; height: 260px; PADDING-LEFT: 10PX; PADDING-TOP: 10PX; } .tdHeaderNav { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10px; font-style: normal; text-decoration: none; word-spacing: normal; letter-spacing: normal; text-transform: none; } .tdFooter { background: url(images/layout/footer_bg.gif)repeat-x center top; height: 50px; FONT-FAMILY: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; COLOR: #FFFFFF; PADDING-TOP: 10PX; PADDING-LEFT: 10PX; } .footerText { FONT-FAMILY: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; FONT-SIZE: 10px; MARGIN-TOP: 0PX; MARGIN-BOTTOM: 0PX; } *********** MY HTML *********** <HTML> <HEAD> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <title>mysite</title> <meta name="description" content="TODO: TEXT"> <meta name="keywords" content="keywords"> <meta name="robots" content="index, follow"> <meta revised="date"> <meta author="mysite"> <link rel="stylesheet" type="text/css" href="Styles.css"> </HEAD> <body> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1"> <tr> <td valign="top" class="tdHeader"> </td> </tr> <tr> <td valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="800" id="table2"> <tr> <td width="180"> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> <tr> <td valign="top" class="tdFooter"> </td> </tr> </table> </body> </HTML> Again, This works FINE in Firefox, where I usually have the worst problems, because I'm not the best css'r out there, but now I've got it perfect in Firefox, and IE, which usually is the easiest thing to code for, doesn't render the background images. Any help?
BACKGROUND: url(images/layout/main_bg.jpg)White repeat-x center top; Code (markup): Should be: background: white url(images/layout/main_bg.jpg) repeat-x center top; Code (markup):
Yeah, but what if I want the rest of the background to be white? How about background: white url(images/layout/main_bg.jpg) #FFFFFF repeat-x center top; Would that work as well?
Using the background property, you have to define things in this order: background-color background-image background-repeat background-attachment background-position Colour goes before the image, not after. So it would just be background: #ffffff url(images/layout/main_bg.jpg) repeat-x center top; Code (markup):
whoops! didn't notice you changed the white location, even after I copied it. I see. But W3Schools doesnt describe it that way. Thanks for the info.
I had same problem. What fixed it for me was to change the File format of the actual background image file from JPG to PNG. Not sure why the jpg would not work with respect to CSS and IE, but that did it for me. Hope this helps!
I have the same problem just now. and found out the problem my original css: background:url(../images/title-photos.jpg) no-repeat center top; after removing top position it works fine now. background:url(../images/title-photos.jpg) no-repeat center; i dunno about the issue in positioning the bg image though. hope this helps
i've been having the same problem for the past 3 hours... finally i tried using the "background-" definition instead of the "background" one and it worked...don't ask :S here's my code: original (didn't work in IE): .bigservi .middle p{ background:url("/mercatsec/img/icon_info_gris.gif")no-repeat top left; padding-left:35px; position:relative; width:880px; } alternative (worked in IE): .bigservi .middle p{ background-image:url("/mercatsec/img/icon_info_gris.gif"); background-repeat: no-repeat; padding-left:35px; position:relative; width:880px; } thanks for all the ones posting ideas
1) lose the all caps, that's invalid CSS. 2) condense your properties. 3) if you are only going to have ONE TD per table, what the **** are you using tables for?!?! 4) lose the double quotes around the URL in your CSS, they are unneccessary. 5) run-in on the no-repeat could be the problem, add a space after the ) 6) Doctype goes BEFORE <html> and <head>, not after. 7), not only are PX fonts a miserable /FAIL/, and anything less than 12px a miserable /FAIL/ - setting such on body is damned near a cardinal sin. 8) Without a live copy, pretty much everyone here is guessing wildly in the dark. URL please? Unless we see it live, we're not going to be much help!
I think in your case it was the lack of space between the last ) and the word "no-repeat". I saw a case where someone had background: url(something.jpg)left top; and IE died. Changing it to background: url(something.jpg) left top; magically worked. Because IE for some reason required a space between the properties (and there really should be a space between properties) while other browsers were able to tell the difference.
"Everything You Know About CSS Is Wrong! - Free 37 Page Preview!" For web designers and developers who want to ensure they're using the very latest, best-practice CSS techniques. Request Your Free White Paper now: linux.tradepub.com/free/w_sitb11/
Dont stress buddy. Send your html + css to my email. I'll fix it and send you back. coldfire_akshat[at]rediffmail.com Please mention "html + css help required from Digital Point forums"
I have everything working exactly perfect in all browsers except in IE it simply will not load that background graphic. I tried everything that you guys suggested. Here is the site: fashioncurrents.com/splash Here is my CSS <style type="text/css"> .changeborder:focus { outline-color: #660000; outline-width: medium; } .changeborder { height:27px; width:180px; } * { margin: 0; padding: 0; } html { background: url(images/splash_password.jpg) center fixed; background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> any ideas?
If Adamsee is right, then that is probably your problem. You have your repeat after your position. Try this instead:
Thanks for the help, but it is still not working in IE 8 and lower. It is super weird because once you click on the image it loads but it doesn't load automatically.. you can check it out at fashioncurrents.com/splash.. Thanks again, Steve
All I did was change the html { blah blah } to body { blah blah } and the background turned up. <style type="text/css"> .changeborder:focus { outline-color: #660000; outline-width: medium; } .changeborder { height:27px; width:180px; } * { margin: 0; padding: 0; } body { background: url(images/splash_password.jpg) center fixed; background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> Code (markup):
Thanks for mentioning the spacing issue... background:url(whatever.jpg)no-repeat; DOESN"T WORK IN IE background:url(whatever.jpg) no-repeat; TOTALLY WORKS IN IE
Thanks for this post save my day Post Scriptum: Why does MS does not dedicate themselves to make OS only...?