hasLayout.net

Bookmark and Share

No Background Image Bug

Table of Contents

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

    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: