Фоновое изображение на весь экран – CSS

07.09.2019
CSS

Категория: CSS.

45645343535342677878-8634501

Вам необходимо растянуть фоновое изображение на весь размер экрана, без отступов и белых полей. Для этого существует несколько способов как с средствами javascript так и с CSS. Приведу два примера растягивания фоновой картинки с помощью CSS.

Вариант первый эмулируем фоновое изображение, этот способ будет работать и в старых версиях браузеров незнающих CSS3.

Допустим HTML страница index.html



   Здесь содержимое страницы

И к нему стили css 

 html, body {
      margin: 0px;
      height: 100%;
    }
    #background {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    #body {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;

Вариант второй это свойства background-size появившийся в CSS3, ему задаются необходимые значения:

  • — ширина и высота фонового изображения в прямом виде
  • — ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента.
  • contain — изображение масштабируется, сохраняя при этом пропорции, по большей стороне так, чтобы и ширина и высота поместились внутри области фонового изображения.
  • cover — изображение масштабируется, сохраняя при этом пропорции, по меньшей стороне так, чтобы и ширина и высота полностью покрыли область фонового изображения.
  • auto — изображение имеет свой собственный размер (масштаб 100%), а если нет то масштабируется, как будто задано значение contain.

И пример реализации.

body {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
Метки: ,