1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

css background image not showing in IE

Discussion in 'CSS' started by rumblepup, Jul 28, 2006.

0
Page 1 of 2
  1. #1
    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">&nbsp;</td>
    </tr>
    <tr>
    <td valign="top">
    <table border="0" cellpadding="0" cellspacing="0" width="800" id="table2">
    <tr>
    <td width="180">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td valign="top" class="tdFooter">&nbsp;</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?
     
    rumblepup, Jul 28, 2006 IP
  2. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #2 
    
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):
     
    AdamSee, Jul 28, 2006 IP
  3. rumblepup

    rumblepup Peon

    Messages:
    100
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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?
     
    rumblepup, Jul 28, 2006 IP
  4. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #4
    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):
     
    AdamSee, Jul 28, 2006 IP
  5. rumblepup

    rumblepup Peon

    Messages:
    100
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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.
     
    rumblepup, Jul 28, 2006 IP
  6. ticalico

    ticalico Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    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!
     
    ticalico, May 18, 2009 IP
  7. hanzray

    hanzray Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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
     
    hanzray, Jul 26, 2009 IP
  8. Neophiliac

    Neophiliac Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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 :)
     
    Neophiliac, Jan 14, 2010 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    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!
     
    deathshadow, Jan 15, 2010 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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.
     
    Stomme poes, Jan 16, 2010 IP
  11. linux Tips

    linux Tips Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    "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/
     
    linux Tips, Apr 24, 2010 IP
  12. coldfiredesigns

    coldfiredesigns Member

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    46
    #12
    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"
     
    Last edited: Apr 25, 2010
    coldfiredesigns, Apr 25, 2010 IP
  13. thinkscrappy

    thinkscrappy Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    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?
     
    thinkscrappy, Dec 10, 2010 IP
  14. MakingThisSucked

    MakingThisSucked Greenhorn

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #14
    If Adamsee is right, then that is probably your problem. You have your repeat after your position. Try this instead:
     
    MakingThisSucked, Dec 11, 2010 IP
  15. thinkscrappy

    thinkscrappy Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    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
     
    thinkscrappy, Dec 12, 2010 IP
  16. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #16
    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):
     
    jeremyhowell, Dec 12, 2010 IP
  17. thinkscrappy

    thinkscrappy Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    HOLY SMOKES!!!! It worked. Thank you very much!
     
    thinkscrappy, Dec 12, 2010 IP
  18. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #18
    No problem mate. :)
     
    jeremyhowell, Dec 12, 2010 IP
  19. Paris Vega

    Paris Vega Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    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
     
    Paris Vega, Mar 2, 2011 IP
  20. Carl29

    Carl29 Active Member

    Messages:
    114
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #20
    Thanks for this post :) save my day

    Post Scriptum: Why does MS does not dedicate themselves to make OS only...?
     
    Carl29, May 16, 2011 IP
Page 1 of 2