Background Image shows in Firefox and Chrome but NOT IE9

Question

I have a header that has an image in the background and it is not showing up in IE9. It works fine in Chrome, Firefox, and Safari. The logo file that is opened in the header displays fine.

HTML:

<div class="myheader">
  <img src="img/logo.png"><h5 class="your-on">You are on: Login Page</h5>
</div>

CSS:

.myheader {
    height: 90px;
    /* background-color: #3D8F43; */
    padding: 5px;
    position: relative;
    border-radius: 10px;
    -moz-border-radius:10px;
    background-image: url("../img/header-bg.jpg");
}

Also, I am simply opening these files locally with whatever browser I want to open it with. It is a demo that I need to email different people and have them open it and view the HTML files so I need it to work locally.

I have already enabled mix content on the settings in IE but it didn't work.

Update - Should have included this first. When I first open the page IE states that it has restricted the webpage from running scripts or ActiveX controls. I allow it to do this and refresh the page but with the same result, no image.

What are you seeing in IE? Does the network tab show that the image is being pulled? — ArrayKnight, Aug 13 '13 at 20:42
Tried using the full background declaration? `background: transparent url('../img/header-bg.jpg') 0 0 no-repeat;` — RaphaelDDL, Aug 13 '13 at 20:44
Using the dev tool, what is the full url of the background image? check to see if it is the one you are expecting — Huangism, Aug 13 '13 at 20:45
off topic: you really don't need `-moz-border-radius` any more, unless you actually still have visitors using Firefox 3.0? — Spudley, Aug 13 '13 at 20:59
1. Check IE's dev tools (press F12 to open), and look at the network tab to see if the image file is being loaded okay. 2. Also in the dev tools, look at the CSS tab to see what styles are being applied to this element. 3. Try opening the image URL directly, to check if IE is able to display the file. — Spudley, Aug 13 '13 at 21:02
You should really be doing `background-image: url("~/path/to/img/header-bg.jpb");` — Mr Jones, Aug 13 '13 at 21:14
Where are the HTML and CSS files located? It seems likely that IE is interpreting the relative URL in the CSS file differently. See http://stackoverflow.com/questions/14724664/css-images-with-relative-url-sometimes-relative-to-page-url-in-ie — EricLaw, Aug 13 '13 at 22:19
@Spudley 1. Network tab shows the file. 2. The background-image css style is being applied. 3. The image does not show if I put the direct path in IE. — Steve W., Aug 13 '13 at 22:40

Hybrid82 · Answer 1 · 2013-08-13T22:29:36.830

Try this:

.myheader {
    height: 90px;
    /* background-color: #3D8F43; */
    padding: 5px;
    position: relative;
    border-radius: 10px;
    -moz-border-radius:10px;
    background: url(../img/header-bg.jpg) no-repeat 0 0;
}

Take out the quotes on the background-image as well as the "-image". See if that works for you ;)

Also, specify the image you have within the class. So try adding:

.myheader img { /* === Specify what your inner image/logo would be --- */
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

HTML:

<div class="myheader">
  <img src="img/logo.png" alt="" title="" /><h5 class="your-on">You are on: Login Page</h5>
</div>

Tried it and no background. Logo looks better though. – Steve W. Aug 13 '13 at 22:57 — Steve W., Aug 13 '13 at 22:57

score 0 · Answer 2 · answered Aug 15 '13 at 17:39

I am not sure why it's happening to you. So i fiddled it out and here's the code(It's the same as yours, only the images are some images that i got from internet) :

HTML :

<div class="myheader">
    <img src="https://www.key.com/kco/images/logo.png"/>
    <h5 class="your-on">You are on: Login Page</h5>
</div>

CSS:

.myheader {
    height: 90px;
    /* background-color: #3D8F43; */
    padding: 5px;
    position: relative;
    border-radius: 10px;
    -moz-border-radius:10px;
    background-image: url("https://www.key.com/kco/images/bg_nav-rht.png");
}

The screenshot looks like this :

enter image description here

The logo is the one containing the keybank string and the background is the one with red and grey color in it.

Here's the fiddle : http://jsfiddle.net/pLkbV/2/

I have tested it on IE 9 and 10 and it worked flawlessly.

So , a possible reason in your case might be that the image is not getting loaded from the path that you have provided in the background URL.

Background Image shows in Firefox and Chrome but NOT IE9

2 Answers2

Linked