Фоновое изображение не отображается в IE8 или ниже, но работает в Firefox и Chrome

Question

У меня есть проект, который имеет фоновое изображение, которое не будет отображаться в IE, если вы не поместите пробел между ними) и не повторяйте. Когда вы помещаете это пространство, оно показывает, но искажено. Это фоновое изображение работает как в Firefox, так и в Chrome.

Живая ссылка: http://www.mastisolcostanalysis.com/survey

CSS:

#app-wrapper{ 
width: 1024px; 
height: 768px; 
min-height:100%; 
margin: 0px auto; 
/*margin-top: -384px; 
position: relative; 
top: 50%;*/ 
text-align: left; 
background: url(../img/ui-frame.png)no-repeat; 
overflow: hidden; 
background-size: 100%; 
    } 

Любая помощь будет принята с благодарностью!

Answer 1

Я понял, что проблема заключается в фоновом изображении, это проблема с размером. Это 2048 х 1536.

http://www.mastisolcostanalysis.com/img/ui-frame.png

Вы должны изменить его размер, чтобы быть 1024 х 768, как вы определили на # приложение-обертка.

IE8 не может масштабировать изображения так, как это делают современные браузеры.

Answer 2

использование этого

background: url('../img/ui-frame.png') no-repeat; 

Answer 3

Положите фоновое изображение тега изображения() и добавить класс к нему. Добавьте этот тег прямо над элементом # app-wrapper в структуре HTML. Стиль тег изображения следующим образом:

img.bg { 
min-height: 100%; 
min-width: 1024px; 
width: 100%; 
height: auto; 
position: fixed; 
top: 0; 
left: 0; 
} 

Answer 4

ОК, похоже, у вас есть серьезные проблемы с настройкой вашего веб-сайта. Когда я начал редактировать CSS с помощью расширения веб-разработчика в FF, я заметил, что у вас есть только что собранный контент поверх каждой точки, а также z-indexed как сумасшедший. Почему это не отдельные страницы? Я действительно думаю, что многие ваши проблемы должны иметь дело с абсолютным позиционированием и z-индексацией, которые у вас есть.

Я заметил, как я перепутал с позиционированием фона и что-то не так, как это было с вещами.

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

Кроме того, я настоятельно рекомендую масштабировать этот снимок себе в Photoshop или что-то подобное. Это полный размер 2048x1536, но вы пытаетесь заставить его быть 1024x768. Это также может привести к большим проблемам.

Удачи.

Answer 5

Этот сайт помогает мне для IE8 и работает хорошо

http://css-tricks.com/perfect-full-page-background-image/