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
    juni 10th, 2009 on 21:53

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

  • Uva
    juli 30th, 2009 on 11:52

    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
    juli 30th, 2009 on 22:06

    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
    oktober 26th, 2009 on 04:43

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

  • damir
    november 5th, 2009 on 02:49

    Thanks man! You totally saved me! 😀

  • roy
    september 17th, 2010 on 08:32

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

  • Junita Abt
    december 3rd, 2010 on 05:21

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

  • Raymond
    december 22nd, 2010 on 18:51

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

  • Nydia Babikian
    februari 10th, 2011 on 05:24

    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
    maj 23rd, 2011 on 22:40

    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
    maj 24th, 2011 on 06:11

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

  • saran rock
    juli 5th, 2011 on 06:28

    Hi Rizo thanks da machi……;)

  • Falkonator
    augusti 2nd, 2011 on 17:45

    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
    september 27th, 2011 on 22:00

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

  • Sudeep
    november 25th, 2011 on 16:44

    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
    januari 9th, 2013 on 05:13

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

  • Farhan
    maj 24th, 2013 on 10:50

    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
    mars 13th, 2014 on 18:00

    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
    mars 13th, 2014 on 18:00

    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
    juli 6th, 2014 on 03:41

    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
    augusti 27th, 2014 on 02:22

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

18 Trackbacks / Pingbacks for this entry

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!

Blogroll

A few highly recommended websites...

Archives

All entries, chronologically...