В данном уроке мы расскажем как установить выбранный фон на свой сайт
Что же конкретно нужно сделать:
- заполнить всю страницу одним изображением без пробелов;
- изменение размеров картинки при необходимости (уменьшении окна браузера);
- сохранение пропорций изображения;
- расположение изображения в центре страницы;
- отсутствие полос прокрутки на странице;
- кросс-браузерное решение, подходящее для разных браузеров;
- реализация без всяких сторонних технологий типа flash.
Замечательное, простое и прогрессивное решение с помощью CSS
Для реализации задачи мы можем использовать свойство background-size в CSS.
Будем использовать элемент html который получше body.
Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.
Код
html {
background: url(ссылка на картинку) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Решение поддерживают почти все браузеры популярные в сети:
- Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
- Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
- Chrome Whatever+
- IE 9+
- Safari 3+
