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

#javascript #html #jquery #css #css3

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

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



#hero {
  background: url(http://placehold.it/1920x1080) no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}





    

Ответы

Ответ 1

Есть мнение, что 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


Ответ 2

background-size: cover;



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


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



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


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


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


Ответ 3

А так?



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