Background Image shows in Firefox and Chrome but N

问题:

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.

回答1:

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>

回答2:

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 :

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.