IE7 CSS Background not showing

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 kommentarer

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

  2. It doesn’t work for me.

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

    Can you help me!

  3. 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 😉

  4. 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

  5. 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 😉

  6. 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.

  7. 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; */
    }

  8. 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”});

    });

  9. 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;
    }

  10. 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;
    }

  11. 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

Lämna ett svar

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.