hasLayout.net

Share |

No Background Image Bug

Affected Versions

This bug affects: IE8, IE7, IE6

Symptoms

No background appears in IE when background image is used (using `background` shorthand property)

Date of the Tutorial

Fri Jul 17 18:14:59 2009

Description

This bug mostly affects lazy people :). The reason I say that is because the only reason why the bug appears is because one single space chacter is missing between the values of the background property. There may be several combinations that trigger the bug, however, I'll settle on one - no space between url() part and whatever would follow next, e.g. no-repeat. Let's glance at our demo:

Demo

HTML Code:
<div></div>
CSS Code:
div {
    width: 500px;
    height: 115px;
    background: #fff url(/pics/hl_logo.png)no-repeat;
    /* note that there is no space after url() part */
}

In IE the image of a ladybug that is visibile in "sane" browsers will not show up.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Fri Jul 17 18:25:52 2009

Fixed Versions

all of the affected

Description

This is probably one of the easiest IE bugs to fix - simply add a space after the url() part; here's a fixed demo:

HTML Code:
<div></div>
CSS Code:
div {
    width: 500px;
    height: 115px;
    background: #fff url(/pics/hl_logo.png) no-repeat;
    /* note that now there IS a space after url() part */
}

Now IE renders everything just fine...

Comments

Create new comment

  • Zoffix Znet

    Tue Dec 13 16:17:35 2011

    Just as the tut says, add the space after url(); that is between the closing parenthesis and the "no-repeat" or whatever else you got following that parenthesis.

  • David Prescott

    Tue Dec 13 07:59:03 2011

    How do I add this space and where? I can't view the demo as the background is not there so I can't see any link.

  • k4t434sis

    Tue Oct 18 16:55:49 2011

    Thanks a bunch, this is another one of the obscure IE bugs that had me pulling my hair out for 2-3 hours.

  • khalid

    Mon Oct 17 04:24:59 2011

    Finally I got it right,I delete my IE8 history and it works like charm.

  • khalid

    Sun Oct 16 09:39:55 2011

    Hi,I have the same problem ,but still not working even after the space thing

    works great in FF and Chrome !!

  • Mikal

    Thu Sep 29 17:44:25 2011

    Perfect. Add another IE bug and fix to the list.

  • zohar

    Mon Aug 15 11:40:05 2011

    Thanks you are king!!!!!!

  • anu

    Wed Jul 13 00:49:44 2011

    no repeat is not working proper in background image

  • Randy

    Wed Jun 29 08:01:56 2011

    Sweet! It works! Thank You so much.

  • mike

    Mon Mar 7 15:28:19 2011

    thank you, i've spent hours looking at my code and didn't spot this silly error. Huge thanks

  • Adriana

    Wed Jan 26 17:23:00 2011

    thanks for sharing the tip! very useful indeed

  • winst

    Thu Nov 18 14:42:50 2010

    Yes! That is it. Fixed it. Glad I found it. Thank you google and thank you for keeping and archiving this info.

  • Andre

    Mon Nov 15 20:22:59 2010

    I am having this problem with IE 7 & 8 with table header. I have the shorthand property in the proper format. Maybe if I do it in longhand?

  • yendoly

    Thu Nov 4 10:28:26 2010

    I'm new at this and need some help I did what I said on your site but not seen the bottom yet, but I did it to another page and it worked I have to do
    and I have another problem I have to do Ncodeimageresize

  • crisp

    Wed Sep 8 15:27:52 2010

    i do that, but in firefox and safari the background dissapears

  • Zoffix Znet

    Sun Sep 27 01:40:25 2009

    Then it must be a different bug.

  • Jack

    Wed Sep 23 05:27:43 2009

    I have the same problem, but each property is in it's own line. Not lazy.
    No background (image or color).

  • Nicky

    Fri Aug 7 04:33:29 2009

    Thank you soooo much... i couldn't believe this was so simple and common at that... I didnt know i was missing a space!! when i saw this, i thought it can't be the problrm... but lo and behold... it was!!! thanks

  • Cbryant

    Sun Jul 26 19:09:05 2009

    Fantastic, simple solution. Thank you tremendously.

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book:

Support Wikipedia