Фоновые изображения отображаются в Firefox и Chrome, но НЕ IE9

Question

У меня есть заголовок, который имеет изображение в фоновом режиме и не отображается в IE9. Он отлично работает в Chrome, Firefox и Safari. Файл логотипа, который открывается в заголовке, отображается в порядке.

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"); 
} 

Кроме того, я просто открывать эти файлы локально с любым браузером, я хочу, чтобы открыть его. Это демонстрация, которую мне нужно отправлять по электронной почте другим людям, а также открывать ее и просматривать файлы HTML, поэтому мне нужно, чтобы она работала локально.

Я уже включил содержание микса в настройках в IE, но это не сработало.

Обновление - должно быть включено это первым. Когда я впервые открываю страницу, IE указывает, что она ограничила веб-страницу от запуска скриптов или элементов управления ActiveX. Я разрешаю это делать и обновляю страницу, но с тем же результатом, без изображения.

Answer 1

Попробуйте это:

.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; 
} 

Вынимают котировки на фоне образа, а также «-изображением». Посмотрите, работает ли это для вас;)

Также укажите изображение, которое у вас есть в классе. Так попробуйте добавить:

.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> 

Answer 2

Я не знаю, почему это происходит с вами. Так что я вертел его и вот код (Это то же самое, как у вас, только изображения, некоторые изображения, которые я получил из Интернета):

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"); 
} 

скриншот выглядит следующим образом:

Этот логотип содержит строку keybank, а фон - с красным и серым цветом.

Вот скрипка: http://jsfiddle.net/pLkbV/2/

Я тестировал на IE 9 и 10, и она работала безупречно.

Таким образом, возможная причина в вашем случае может заключаться в том, что изображение не загружается с пути, который вы указали в фоновом URL.