Как растянуть картинку в HTML? Существует несколько способов растянуть фоновую картинку на всю страницу сайта. Все они отличаются не только реализацией, но и результатом.

Мы рассмотрим как использовать фоновую картинку так, чтобы она была постоянно растянута на весь сайт с помощью CSS 3.0.

Давайте распишем те свойства, какими должен обладать хороший метод:

  • Картинка должна заполнять все пространство без пробелов
  • Растягиваться в случае необходимости
  • Сохранять пропорции изображения
  • Центр изображения должен быть в центре страницы
  • Если изображение большое должны отсутствовать полосы прокрутки
  • Кроссбраузерность (на сегодняшний день уже большинство браузеров поддерживают CSS 3.0)
  • Без использования дополнительных механизмов (javascript, flash)

Мы можем это реализовать на чистом CSS 3.0 благодаря свойству background-size, оно масштабирует изображение согласно заданным размерам.

Синтаксис использования свойства background-size:

background-size: %значение%

Значение может быть следующим:

  • В единицах (px, cm, em и т.д.)
  • В процентах (задает размер картинки от высоты или ширины элемента)
  • auto (Если задано высота и ширина как auto auto, то размеры фона остаются исходными). Если указать например 250px auto, то размеры высчитаются исходя из пропорций картинки
  • cover (пропорциональное растягивание, при этом картинка растянется на весь блок)
  • contain (пропорциональное растягивание, при этом картинка растянется так, чтобы полностью вместиться в блок)

Можно указывать как одно, так и два значения. Если указано одно значение (ширина), то второе будет auto (ширина).

Свойство изучили, требования выставили теперь смотрим код:

html {
	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;
}

Данное решение работает в следующих браузерах:

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+ (Opera 9.5 с пользовательским свойством через -o-)
  • Firefox 3.6+ (Firefox 4 поддерживает свойство без префикса)

Такой метод визуально подходит лучше всего при растягивании картинки на весь фон сайта.

(Visited 9 044 times, 1 visits today)