Rizo's

IE7 CSS Background not showing

by on apr.15, 2009, under Design

Sometimes backgrounds will be visible using firefox but not IE7 which makes you wonder…. why?

The reason is pretty simple. CSS needs to be perfect for IE to understand them.

A perfect example would be.

[sourcecode lang=’css’]
body{

background:#fff url(picture.jpg)no-repeat;

}
[/sourcecode]

That piece of CSS will work on Firefox but not on IE7 (funny thing is that it MIGHT work on IE7 but it wont most of the time)

[sourcecode lang=’css’]
body{

Background-image:url(’image.jpg’);
Background-repeat:no-repeat;
Background-color:#fff;

}
[/sourcecode]

This will on the other hand work. As you can see, they have the same content, just a different layout.

You can of course put it in one row but make sure to have the right format, otherwise you’ll still have the same problem.

[sourcecode lang=’css’]
body{

background:#fff url(picture.jpg) no-repeat;

}
[/sourcecode]

As you can see, the only difference is the space between ”.jpg)” and ”no-repeat”

Try this page with both Firefox and IE7 and you’ll see that IE7 won’t show the background, but Firefox will.

:, ,

22 Comments for this entry

  • Frank

    Thanks. I was about to pull my hair out over a single space between the image url and no-repeat.

  • Uva

    It doesn’t work for me.

    This is my code:
    .cel1 img{
    background:url(bg.png)no-repeat;
    padding: 2px;
    }

    Can you help me!

  • Rizo

    Hi Uva

    Your code looks right, but as I said in my post, you need to be careful with the spaces. Make sure yo have a space between url(bg.png) and no-repeat and it will work 😉

  • vasilmann

    hi. For me didn’t work either but when i written separatly it has been worked.
    thx

  • damir

    Thanks man! You totally saved me! 😀

  • roy

    Thanks for this info – can’t believe IE would do this!

  • Junita Abt

    We really cherish this website. Wewish we could come here everyday\all day.

  • Raymond

    Thanks. Solved my problem. Wish I had found this a week ago. What a PITA.

  • Nydia Babikian

    Unquestionably believe that that you said. Your favorite justification seemed to be on the net the simplest factor to take note of. I say to you, I certainly get irked at the same time as people think about worries that they plainly do not realize about. You controlled to hit the nail upon the top and also defined out the whole thing without having side effect , people could take a signal. Will probably be again to get more. Thanks – Elegant London Escorts, 65-67 Brewer Street, Floor: 2, London W1F 9UP. Phone: 020 3011 2941

  • Zian

    You must be joking me, I nearly deleted the website as it was driving me nuts. Than I used the good ol google and found this. Thanks man 😉

  • Rizo

    Hehe I know. Ie has plenty of cute little bugs. Glad I could help 😉

  • saran rock

    Hi Rizo thanks da machi……;)

  • Falkonator

    I was getting frustrated and even installed the newest version of IE. Thanks for your help. I wish IE could get with the program and be like Firefox.

  • Jan

    Thank you so much! that was maddening!!!!

  • Sudeep

    hi,

    This might sound strange but in my case the background is shown some time, i used jquery, do you think there is some problem there

    here is the code

    #popup
    {
    width:825px;
    height:500px;
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-413px;
    text-align:left;
    z-index:21000;
    background:url(’images/popup_bg.png’) no-repeat;
    /* background-position:center;
    background:#FFC0B0;
    border:1px solid #ffffff; */
    }

  • Rahod

    I dont know why this Microsoft people doing this.Most of the my designs has made some craps by IE .
    damn…

  • Farhan

    You are a star …. It worked for me

    I was using jQuery to display comment bubbles and was using Background attributes in a single line but after going through your post what I just did was to simply break the attributes in different lines and it worked … lolz SILLY but it works

    $(document).ready(function() {

    // Topic Style
    $(”.type-topic .bbp-reply-content”).css({”background-color” : ”#fff”,”border” : ”2px solid #9ebc53″,”font-weight” : ”bolder”});

    // Reply Style
    $(”.type-reply .bbp-reply-content:odd”).css({”background-color” : ”#fff”,”border” : ”1px solid #9ebc53″,”font-weight” : ”bolder”});
    $(”.type-reply .pop:odd”).css({”margin-left” : ”30px” });
    $(”.type-reply .pop:odd”).css({”background” : ”url(/images/comment_pop_left.png)”});
    $(”.type-reply .pop:odd”).css({”background-repeat” : ”no-repeat”});

    $(”.type-reply .bbp-reply-content:even”).css({”background-color” : ”#E3E6CE” , ”border” : ”1px solid #c1d491”});
    $(”.type-reply .pop:even”).css({”margin-left” : ”430px” });
    $(”.type-reply .pop:even”).css({”background” : ”url(/images/comment_pop_right.png)”});
    $(”.type-reply .pop:even”).css({”background-repeat” : ”no-repeat”});

    });

  • Damon

    This still does work for me in IE and I’m at my wits end trying to figure out why:

    #element1 {
    background-image: url(”researchgraphic.jpg”);
    background-repeat: no-repeat;
    width:650px;
    height:713px;
    border:none;
    margin:0;
    padding:0;
    position:relative;
    top:-60px;
    z-index:0;
    }

  • Damon

    I meant this still does NOT work for me in IE and I’m at my wits end trying to figure out why:

    #element1 {
    background-image: url(”researchgraphic.jpg”);
    background-repeat: no-repeat;
    width:650px;
    height:713px;
    border:none;
    margin:0;
    padding:0;
    position:relative;
    top:-60px;
    z-index:0;
    }

  • small business

    I think this is one of the most significant information for me.
    And i’m glad reading your article. But should remark on some general things,
    The site style is ideal, the articles is really excellent
    : D. Good job, cheers

  • Lauretta

    Why users still make use of to read news papers when in this
    technological globe the whole thing is existing on net?

2 Trackbacks / Pingbacks for this entry

Leave a Reply

You must be logged in to post a comment.

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!