3

Как расположить фоновую картинку на весь экран, чтобы это было кроссбраузерно по ie8 включительно?

Делаю по такому принципу, но встроенный эмулятор в ie edge и онлайн тестеры отображают криво или подвисают..

#hero {
  background: url(http://placehold.it/1920x1080) no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
<!--[if lt IE 9]>
	  <script type="text/javascript">
    hero.style.width = document.documentElement.clientHeight || document.body.clientHeight + "px";
	  </script>
    <![endif]-->
<div id="hero"></div>

3 ответа 3

3

Есть мнение, что JQuery 2.x не поддерживает IE8-

http://jquery.com/download/

Могу предложить попробовать

hero.style.height = (document.documentElement.clientHeight || document.body.clientHeight) + "px"

Единицы измерения vw и vh тоже не ладят с IE 8

http://caniuse.com/#search=vh

3
  • "Единицы измерения vw и vh тоже не ладят с IE 8" -именно поэтому и прописываю условие со скриптом :) @Alexey Kopantsev т.е. так имеете ввиду - изменения в примере выше
    – Вася
    10 янв 2016 в 11:16
  • 2
    условный комментарий тут не нужен, можете убрать из стилей htight: 100vh, скрипт на JS отработает как надо, и к тому же не потребует подключения JQuery. На всякий случай уточню, что для корректной работы скрипта, как вы понимаете, нужно чтобы браузер уже построил DOM-модель хотя бы до того элемента, который нужно растянуть, поэтому подключение скрипта в HEAD работать не будет 10 янв 2016 в 11:24
  • так скрипт мне собственно нужен только для ie8, все остальные браузеры неплохо справляются с height:100ch; - зачем же лишний скрипт вешать для всех? а условный комментарий сработает перед закрытием body?
    – Вася
    10 янв 2016 в 11:32
2
background-size: cover;

Это не работает в IE8.

hero.style.width = document.documentElement.clientHeight || document.body.clientHeight + "px";

Тут в стиль прописывается невалидное значение. Скобок не хватает, как в соседнем ответе написали. Но я не понимаю, зачем это.

Как расположить фоновую картинку на весь экран, чтобы это было кроссбраузерно по ie8 включительно?

Для IE8 надо класть тег img с абсолютным позиционированием.

4
  • "Но я не понимаю, зачем это." - для подсчета высоты экрана - у него ведь может быть различная высота - так ведь? "Для IE8 надо класть тег img с абсолютным позиционированием." и картинка будет на всю высоту, не ужатая/растянутая и не обрезанная? это как -поясните плиз
    – Вася
    10 янв 2016 в 12:11
  • 1
    @Вася, сорри, не обратил внимание, что там cover и хотел растянуть. Подумаю ещё.
    – Qwertiy
    10 янв 2016 в 12:17
  • 1
    пардон, господа, забыл про скобки. код поправил. тяжелое утро было. 10 янв 2016 в 12:18
  • document.documentElement.clientHeight или document.body.clientHeight, в зависимости от браузера, получают значение высоты документа в числовом формате, дописываем "рх" и вставляем в стили 10 янв 2016 в 12:26
2

А так?

#hero {
  background: url("http://wpapers.ru/wallpapers/Music/8172/1920x1080_%D0%93%D0%B8%D1%82%D0%B0%D1%80%D0%B0.jpg") no-repeat scroll 0% 0%/cover;
width: 100%;
  height: 100vh;
  background: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wpapers.ru/wallpapers/Music/8172/1920x1080_%D0%93%D0%B8%D1%82%D0%B0%D1%80%D0%B0.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wpapers.ru/wallpapers/Music/8172/1920x1080_%D0%93%D0%B8%D1%82%D0%B0%D1%80%D0%B0.jpg', sizingMethod='scale')";
}
}
<!--[if lt IE 9]>
	  <script type="text/javascript">
    hero.style.width = document.documentElement.clientHeight || document.body.clientHeight + "px";
	  </script>
    <![endif]-->
<div id="hero"></div>

4
  • а что собственно у вас получилось? вы видели результат? ничего не пойму..
    – Вася
    11 янв 2016 в 7:26
  • "правильно размер фона ставить внутри фона, у вас он отдельно прописан background-size" - не вижу никакой проблемы, все корректно отображает и много где используется такой подход. @Arcadiy ну смотрите, что у вас получается - jsfiddle.net/08dyL07x Это совсем не то, что мне нужно! мне нужен фон, который будет помещаться ровно на весь экран без искажений и притом, чтобы он был кроссбраузерным. для всех браузеров кроме ie8 у меня получилось сделать, а вот как с ним - пока остается загадкой..
    – Вася
    11 янв 2016 в 8:03
  • "правильно размер фона ставить внутри фона, у вас он отдельно прописан background-size". кто это писал? можно ссылку на источники такой информации? 11 янв 2016 в 10:13
  • @Arcadiy хорошая попытка, но ie выдает ругается на hero - говорит, что его не знает..
    – Вася
    11 янв 2016 в 10:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.