Как сделать картинку фоном

mychatik

Support
Команда форума
Регистрация
26.05.15
Сообщения
529
Реакции
461
Баллы
63
Требования к фоновому изображению у нас следующие:
  • Покрывается 100% ширины и высоты страницы
  • Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
  • Сохраняются пропорции картинки (aspect ratio)
  • Изображение центрировано на странице
  • Фон не вызывает скроллов
  • Решение максимально кроссбраузерное
  • Не используются никакие другие технологии кроме CSS

Способ 1​

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный.
Он использует свойство CSS3 background-size, которое мы применяем к тегу html. Именно html, а не body, т.к. его высота больше или равна высоте окна браузера.
Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover.

CSS:
html {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Этот способ работает в Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Способ 2​

Этот способ предусматривает использование элемента img, размер которого будет изменяться в зависимости от размера окна браузера.
Чтобы растянуть изображение на весь экран, ему необходимо задать min-height и width со значением 100%.
А чтобы изображение не сжималось до размера меньшего, чем оригинальный, установим min-width со значением равным ширине картинки.
В случае если ширина окна будет меньше ширины изображения, будет использоваться media query для выравнивания бэкграунда по центру.

HTML:
<img src="/images/background.jpg" class="background">

CSS:
img.background {
min-height: 100%;
min-width: 640px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;

/* Зависит от размера изображения */
@media screen and (max-width: 640px){
img.bg {
left: 50%;
margin-left: -320px;
}
}
}

Этот способ работает в любой версии браузеров (Chrome, Opera, Firefox, Safari) и IE 9+

Способ 3​

Еще один способ заключается в следующем: фиксируем изображение <img> к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.
Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в <div>, который мы делаем в 2 раза больше размера окна. А само изображение мы растягиваем и помещаем по центру.

HTML:
<div class="background">
<img src="/images/background.jpg">
</div>

CSS:
div.background {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}

Этот способ работает в современных браузерах и IE 8+.
 

stream

Support
Команда форума
Регистрация
09.09.14
Сообщения
1.014
Реакции
674
Баллы
113
1 вариант лучший) +
 
Сверху Снизу