Часто ли вы сталкивались с сайтами, у которых фоновый рисунок растянут на всю страницу? И не важно в каком разрешении вы просматриваете сайт — фон всегда занимает весь экран браузера и не смотриться растянутым. Я тоже задавался этим вопросом и нашел ответ в хорошей статье Криса Койера. Сегодня приведу вольный перевод, максимально близко к тексту. Будут рассмотрены четыре разных способа сделать фоновый рисунок на всю страницу. В конце статьи — ссылка на архив с демо страницами.
Цель у нас такова, что фоновый рисунок на сайте должен закрывать все видимое окно браузера в любое время. Вот некоторые конкретные требования:
- Изображение заполняет всю страницу, без пробелов
- Рисунок масштабируется если нужно
- Сохраняются пропорции изображения (соотношение сторон)
- Изображение центрируется в центре страницы
- Не появляются полосы прокрутки
- По-возможности максимально кроссбраузерное решение
- Без различных махинаций с флешэм
Отличный, простой и прогрессивный метод с использованием CSS
Мы можем решить нашу задачу с помощью чистого CSS, за что спасибо свойству background-size
, которое появилось в CSS3. Нам понадобиться элемент html
(лучше, чем использовать body
, т.к. это не всегда полная высота окна браузера). Мы зададим фоновый рисунок элементу html
, центрируем его, позицию выберем фиксированную (fixed
) и скорректируем размер изображения с помощью свойства background-size
, которое установим в значение cover
:
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 любой версии
- IE 9+
- Opera 10+ (Opera 9.5 поддерживает
background-size
, но не поддерживаетcover
) - Firefox 3.6+ (Firefox 4 поддерживает свойство
background-size
без приставки-moz
)
Есть так же решение для IE, но будьте осторожно — есть мнение, что после его применения некоторые ссылки на странице не работают. Если такое случается — попробуйте применить этот код не к блокам html
или body
, а к блоку div
, но с шириной и высотой 100%. Вот код:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Только CSS. Вариант №1
В этом примере мы будем использовать элемент img
, который легко изменяет размер в любом браузере. Мы воспользуемся свойством min-height
чтобы заполнить окно браузера вертикально и зададим ширину в 100% чтобы сделать тоже самое по горизонтали. Мы так же зададим min-width
для того, чтобы изображение не становилось меньше чем оно есть на самом деле.
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Работает в следующих браузерах:
- В любой версии нормальных браузеров: Safari / Chrome / Opera / Firefox
- IE 6: Работает — но есть проблемы с фиксированием изображения
- IE 7/8: По большей части работает, но не центрирует на маленьких разрешениях, при этом заполняет экран полностью
- IE 9: Работает
Только CSS. Вариант №2
Есть еще один довольно простой способ решить нашу задачу: использовать изображение на нашей страницу, задать ему фиксированную позицию в верхний левый угол и зададим min-height
и min-width
100%, сохраняя соотношение сторон.
#bg {
position:fixed;
top:0;
left:0;
/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
}
Тем не менее, это не центрирует изображение, что важно для нас. Мы можем решить эту проблему заключив изображение в блок div
. Этот блок будет по размерам в 2 раза больше чем экран браузера. Когда же мы вставим изображение в этот блок, то оно будет находиться строго по центру окна браузера, сохранив при этом соотношение сторон.
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
Работает этот вариант в:
- Safari / Chrome / Firefox (предположительно не все старые версии)
- IE 8+
- Opera (все версии) и IE оба неправильно понимают этот код (неправильное позиционирование, не понятно почему)
Вариант с ипользованием jQuery
Идея смотрится проще, чем реализация на CSS, если учесть, что мы знаем что соотношение сторон изображения больше или меньше соотношения сторон окна браузера. Если изображение меньше, то нам достаточно установить ширину в 100% у изображения и мы будем знать, что оно заполнит экран полностью. Соответственно, если изображение больше, то нам достаточно будет установить высоту в 100% чтобы заполнить экран изображением. Мы будем использовать JavaScript, а точнее библиотеку jQuery.
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
скачать исходники
Не успеваете сдать отчеты в налоговую? Не хотите стоять в очередях? Тогда электронная отчетность в налоговую — ваш выбор. Заполни, проверь и отправь отчеты в интернете.
Оригинальная статья http://css-tricks.com/3458-perfect-full-page-background-image/
спасибо, очень актуальная инфа
рад, что пригодилась
Кому не сложно!
Напишите пожалуйста поподробнее, а то чет не получается. Вставляю в CSS ,все остается без изменений! Может есть какой-то нюанс. Куда что вставлять? Буду очень благодарен!
Вот так получилось:#background-wrap img { z-index: -1; /*max-height: 100%;*/ /*min-height: 60em;*/ width: 100%; height: 100%; position:fixed;}…сразу после ставим
…сразу после body ставим
Актуально?
Ни то слово, для новичков в области дизайна, это просто
клад!
В виду малого опыта, у меня возник вопрос по поводу ХАКА в
табличном способе:
Поясните, пожалуйста, это случайная лишняя запись?
Если нет, тогда где папка ”js” со скриптами?
Заранее благодарен за ответ.
Спасибо, единственный сайт, где нашла отличное решение без лишней воды! 5+