Support » Themes and Templates » IE-specific CSS background image not working

  • Resolved ecclescake


    Website in question is

    I’ve developed a custom theme which uses an image as the header background, specified in my theme’s style.css thus:
    #page-wrap { background: url(images/photo-header.png) center top no-repeat; }
    I want to use a different background image in IE 8 and lower, so I use conditional comments to call a special stylesheet:

    <!--[if lte IE 8]>
    <link href="<?php bloginfo('template_directory'); ?>/css/ie.css" media="screen" rel="stylesheet" type="text/css" />

    And the only line in that stylesheet:
    #page-wrap { background: url(images/photo-header-ie.png) center top no-repeat; }

    But the IE-specific image never loads in IE 7 or 8! It triggers a 404. Developer tools show the rule as active, but the browser can’t load the image. The image is on the server with the same permissions as all my other images, which load fine. I can load the image directly in IE. When I try to load the normal header image in the IE-specific stylesheet I also get a 404. When I remove the link to the IE-specific stylesheet, the header image called in the normal stylesheet loads fine. This leads me to believe the problem is in the stylesheet…but it looks fine to me!

    Other things I’ve tried: putting the call to the IE-specific image in an embedded stylesheet in the conditional comment rather than linking to the stylesheet. Doesn’t work. I cleared the browser cache, also to no avail.

    The specific link throwing the 404 is: (where [username] is my web hosting account username)

    Not sure why the ~[username] is in there–I was developing the site without the domain name, so the site URL was in the form http://[ip-address]/~%5Busername%5D. But now we have the domain name, so the username shouldn’t show up anywhere in a link (except for true https links, but that’s a different story…I think?). Is this just an annoying cache thing? I reloaded using Ctrl + F5 but nothing changed.

    I’m testing using the Microsoft VHDs (Windows 7/IE8 and Vista/IE7) in VirtualBox on Mac OS 10.6.7.

    Can anyone reproduce this problem? Shed any light on it? Thanks so much!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Slobodan Manic



    Since your IE stylesheet is located in “css” subfolder, you might want to try this:

    #page-wrap { background: url('../images/photo-header-ie.png') center top no-repeat; }

    That is, of course, if photo-heder-ie.png is located in the same folder as regular photo-header.png

    I hope that helps.



    I laughed aloud at myself when I read your response. Usually I’m pretty good with directory paths, but sometimes I overlook them and then I’m blind to the fact that they’re causing the problem. I applied your change and it works fine now.

    Thanks so much, Slobodan! I’ve been staring at code for too long. Time to go outside.

    Slobodan Manic


    I know exactly what you mean. As soon as I read “I laughed” I just KNEW you were working for a long time with no break 🙂

    Really glad I could help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘IE-specific CSS background image not working’ is closed to new replies.