Просмотров: 1 676

Как сделать большое фоновое изображение с помощью CSS.

Привет, друзья. Давайте посмотрим, как можно сделать в качестве фона веб-страницы большое изображение.

Например, это может выглядеть вот так:

10-06-2013 12-38-48

Основная трудность в том, чтобы растянуть изображение на весь экран, сохраняя его пропорции.

В CSS3 появилась новое свойство, которое позволяет добиться такого эффекта.

Это свойство background-size со значением cover.

Желательно, чтобы фоновое изображение имело минимальную ширину 1024 пикселя, иначе оно будет очень сильно растягиваться и терять свое первоначальное качество.

Собственно вот код стилей CSS

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

Изображение будет добавляться к элементу html с помощью свойства background. Растягивается на весь экран оно с помощью дополнительного свойства background-size: cover.

В случае, если background-size: cover в каком-то браузере не сработает, изображение будет выровнено по центру (center – по горизонтали и center по вертикали) и будет зафиксировано при прокрутке экрана.

Если у вас что-либо не получилось или вам нужна техническая помощь, можете воспользоваться моими услугами. Вот ссылка на сайт.