Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Как установить фоновую картинку на весь экран?

Дата:4.02.15 в 14:21
Раздел: 

Сейчас вы узнаете, каким образом можно преобразовывать бекграундную картинку, чтобы ее ширина соответствовала значению ширины родительского блока или экрана монитора.

Как установить фоновую картинку на весь экран

Довольно часто на сайтах в качестве фона выступает не просто какой-нибудь цвет, а именно изображение с узором или рисунком. Очень важно уметь масштабировать рисунок под размеры своего контейнера. Этот процесс можно осуществить свойством background-size, которое устанавливает размеры фона. Если для него указать одно значение, то оно будет соответствовать ширине рассматриваемого графического файла, а высота подгонится автоматически. Но в то же время можно указывать два значения, которые определять ширину и высоту. В нашем случае нужно растянуть наш фон на всю ширину, поэтому для указанного свойства задаем ширина 100%.

Пример смотрим здесь

CSS

body {
    background: url(img.jpg) no-repeat; 
	background-size:100%;
   }

Смотрим в браузер

установки ширины изображения

На заметку

Советую обращать внимание на размеры фоновой картинки. Если они буду не достаточно большие, то при расширении окна качество изображения испортиться. Нужно прикидывать максимально возможный размер окна и обработать изображение в графических редакторах так, чтобы было идеальное соотношение размеров к объему картинки.

В каких браузерах работает?

9.0+ 3.0+ 9.6+ 3.1+ 3.6+ 2.0+ 2.0+

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)