|

Растягиваем фоновую картинку в размер окна браузера. Кроссбраузерный background-size

10 комментариев

Задача: растянуть фоновую картинку так, чтобы при любом размере экрана браузера она занимала все окно и при этом не «размножалась» (background-repeat: no-repeat).
«Старый» способ решения: картинку (<img />) поставить в отдельный слой и задать размеры 100%. Очевидный минус — лишний элемент, который служит только для визуального оформления.
Новый способ: в CSS3 появилось свойство background-size: , которое позволяет задать масштаб фонового изображения так же, как это возможно сделать с помощью width и height для обычных картинок (<img />).


Итоговые результаты:
Фоновая картинка на все окно по ширине и высоте (background-size: 100% 100%)
Фоновая картинка на все окно по ширине (background-size: 100% auto)

Свойство само по себе очень интересное и позволяет многое «вытворить» с фоном, но вернемся к нашей задаче.
Решение очевидное — ставим картинку в фон body и масштабируем на весь экран с помощью background-size:
Чтобы картинка заняла все окно, ставим масштаб 100% по вертикали и горизонтали. Заодно сбросим отступы у body и зададим body и html минимальную высоту 100%.
У меня будет темный бэкграунд. поэтому я задам для текста белый цвет. Чтобы фоновое изображение оставалось на месте при прокрутке страницы, в случае если контент не будет влезать в окно, добавим для фона background-position: fixed;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Растягиваем фоновую картинку в размер окна.
Кроссбраузерный background-size (100% 100%)</title>
<style type="text/css">
html { min-height:100%; }
body { padding:0; margin:0; min-height:100%; color:#ffffff;
background: #000000 url('images/abstract_background.jpg') fixed top left no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
Тест
</body>
</html>

Открываем в браузере — ура. Работает. Если конечно вы пользуетесь последними версиями браузеров — background-size: поддерживается в Internet Explorer 9+, Firefox 4+, Opera 10.53+, Chrome 7+, Safari 5+.
Но пока еще достаточно пользователей со старыми браузерами. Так что порадуем и их:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Растягиваем фоновую картинку в размер окна.
Кроссбраузерный background-size (100% 100%)</title>
<style type="text/css">
html { min-height:100%; }
body { padding:0; margin:0; min-height:100%; color:#ffffff;
background: #000000 url('images/abstract_background.jpg') fixed top left no-repeat;
-o-background-size: 100% 100%;  /* Opera 9.5+ */
-webkit-background-size:100% 100%; /* Safari 3+, Chrome */
-moz-background-size:100% 100%; /* Firefox 3.6+ */
-khtml-background-size:100% 100%; /* Konqueror */
background-size: 100% 100%;
}
</style>
</head>
<body>
Тест
</body>
</html>

Все равно чего-то не хватает... Пользователи IE до 9-й версии пока видят обычный не растянутый фон. Пора вспомнить, что многие свойства CSS3 пришли к нам из древнего IE 5.5, который начал поддерживать фильтры.
Фильтр AlphaImageLoader — именно то, что нам нужно. Но есть одна проблема. Свойство sizingMethod этого фильтра позволяет либо вставить картинку «как есть» — в этом случае оно работает подобно обычному background-image с background-repeat: no-repeat; , «растянуть», или «сжать» элемент до размера фоновой картинки, либо растянуть картинку до размеров элемента.
Последний вариант нам и нужен. Но и тут есть проблема: фильтр действует «независимо» от свойства background: , а значит background-position: fixed; для него применяться не будет и картинка растянется на весь body. В случае, если контента на странице будет много, то картинка растянется по высоте на весь контент.
Чтобы этого избежать мы добавим еще один элемент html только для эксплореров до 8-й версии, перенесем для них фон с body на этот элемент, а весь остальной контент поместим слоем выше.
Поскольку IE 6 «не понимает» position: fixed; , добавим для него отдельный «костыль».

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Растягиваем фоновую картинку в размер окна.
Кроссбраузерный background-size (100% 100%)</title>
<style type="text/css">
html { min-height:100%; }
body { padding:0; margin:0; min-height:100%; color:#ffffff;
background: #000000 url('images/abstract_background.jpg') fixed top left no-repeat;
-o-background-size: 100% 100%;
-webkit-background-size:100% 100%;
-moz-background-size:100% 100%;
-khtml-background-size:100% 100%;
background-size: 100% 100%;
}
</style>
<!-- для Internet Explorer < 9 -->
<!--[if lt IE 9]>
<style type="text/css">
#container { position: relative; z-index:1; }
#iefix { width: 100%; position:fixed; top:0; bottom:0; left:0; right:0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/abstract_background.jpg', sizingMethod='scale');
-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/abstract_background.jpg', sizingMethod='scale');
}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">
#iefix { position:absolute; z-index:1;
height: expression( document.documentElement.offsetHeight+'px' );
top: expression( eval(document.documentElement.scrollTop-4) + 'px' );
}
</style>
<![endif]-->
</head>
<body>
<!--[if lt IE 9]><div id="iefix"></div><![endif]-->
<div id="container">
Тест
</div>
</body>
</html>

Жалко, что пропорции картинки искажаются. В каких-то случаях это необходимо, но не с такими изображениями. Исправим.
Теперь фоновые картинки у нас будут растягиваться только по ширине, а высота будет подбираться пропорционально. Для этого используем background-size: 100%; и немного «поколдуем» с высотой нашего элемента для IE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Растягиваем фоновую картинку в размер окна.
Кроссбраузерный background-size (100% auto)</title>
<style type="text/css">
html { min-height:100%; }
body { padding:0; margin:0; border:0; min-height:100%;
font:14px/1.5em Arial, Helvetica, sans-serif; color: #FFFFFF; text-shadow:1px 1px 0 #000000;
background: #06040C url('images/hs-2007-30-d-web.jpg') top left  fixed no-repeat;
-o-background-size: 100%;
-webkit-background-size:100%;
-moz-background-size:100%;
-khtml-background-size:100%;
background-size: 100%;
}
</style>
<!--[if lt IE 9]>
<style type="text/css">
#container { position: relative; z-index:1; }
#iefix { width: 100%; position:fixed; top:0; bottom: 0; left:0; right:0;
height: expression(
document.getElementsByTagName('body')[0].offsetWidth/400*202 +  'px');
/* 400 - ширина фоновой картинки в пикселях, 202 - её высота */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/hs-2007-30-d-web.jpg', sizingMethod='scale');
-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/hs-2007-30-d-web.jpg', sizingMethod='scale');
}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">
body, html { zoom: 1; }
#iefix { position:absolute; z-index:1;
top: expression(eval(document.documentElement.scrollTop) + 'px' );
}
</style>
<![endif]-->
</head>
<body>
<!--[if lt IE 9]><div id="iefix"></div><![endif]-->
<div id="container">
Тест
</div>
</body>
</html>

В примеры добавлены еще несколько элементов с background-size: ведь применять это свойство можно не только к body. Еще раз ссылки на примеры, если вы их пока не посмотрели:

Фоновая картинка на все окно по ширине и высоте (background-size: 100% 100%)
Фоновая картинка на все окно по ширине (background-size: 100% auto)



Раздел: CSS3. Тэги: <, , />

Следить за комментариями к этой статье (RSS 2.0) | Оставить комментарий

10 комментариев

  1. Семен 2 Июнь 2011 в 21:37

    Спасибо большое за статью, долго не мог эту проблему решить...

    Автору большое спасибо за ценную информацию

  2. Некит 23 Июнь 2011 в 16:28

    Автору респектоз! Нужная вешь.

  3. Arny 29 Ноябрь 2011 в 17:07

    Огромное спасибо за статью. Очень полезная и работоспособная!!!

    Единственное заметил, то в IE с пропрорциональной растяжимостью все равно проблема, даже с expression.

  4. A1ex 29 Ноябрь 2011 в 17:37

    >> Arny

    У фильтра IE и background-size разные методы.

    У background-size, кроме дефолтного auto, это могут быть: значения (в пикселях, например), проценты, contain (масштабирование с сохранением пропорций, картинка целиком внутри блока), cover (масштабирование с сохранением пропорций, ширина или высота картинки равна ширине или высоте блока)

    А у фильтра есть sizingMethod, у которого только 3 значения: image («обрезает» блок под размер картинки), crop («обрезает» картинку по размеру блока) и scale (масштабирует картинку по размеру блока). Посмотреть в действии это можно на странице Filters and Transitions Master Sample (Только в IE конечно;) Выбрать фильтр AlphaImageLoader и поиграться с настройками)

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

    При использовании скрипта это возможно. Но здесь речь шла о CSS, поэтому я сознательно не стал этого делать. Возможно, зря. Для expression же, который любит пересчитываться при любом действии пользователя, это было бы уже чересчур.

  5. Alex 21 Декабрь 2011 в 1:52

    помогите в ие8 фон сплющивается (( в 7м и 9м норм

  6. A1ex 21 Декабрь 2011 в 2:10

    >> Alex

    Надо смотреть сайт. Скорее всего, нужно будет использовать скрипт, потому как на самом деле, в старых IE фон непропорционален. См. комментарий выше для Arny

    filter со значением scale (а другого подходящего варианта для них нет) масштабирует картинку по размерам блока без учета пропорций. Т.е. для них надо блок «сделать» с учетом пропорций картинки.

  7. Dmitry 4 Март 2012 в 17:51

    Вообще-то в IE8 expression не работает в принципе (работает только в режиме совместимости с IE7), поэтому без javascript тут не обойтись

  8. A1ex 5 Март 2012 в 0:54

    >> Dmitry

    Верно))

    Как вариант, добавить для включения режима совместимости

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    Но это не есть гуд.

    Правильнее будет сделать полноценный фикс — с возможностью использовать в старых IE и другие варианты значений background-size (contain, cover ...).

  9. Dmitry 7 Март 2012 в 18:10

    А в чем смысл использовать AlphaImageLoader? Почему бы в место этого не использовать картинку, вставленную тегом в ...?

    Кстати, «fixsed» пишется без буквы «s»,

    -o-background-size работает с Opera 9.5+, а не 7+,

    -moz-background-size работет с Firefox 3.6+, а не 3.5+

  10. A1ex 8 Март 2012 в 18:20

    >> Dmitry

    «fixsed» — спасибо, поправил. К счастью, описка была в тексте, а не в коде.

    Фильтр используется для того, чтобы была возможность поставить картинку именно в фон блоку. «Просто картинка» — известный старый вариант, упомянутый в самом начале. Но он далеко не всегда удобен, потому что требует позиционирования блоков.

    P.S. Слово «вместо» пишется слитно ;)

Оставить комментарий:

Вы можете использовать следующие тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Где взять аватар?

Вход | Регистрация

Первые комментарии незарегистрированных посетителей проходят модерацию.
Адрес сайта публикуется только после регистрации или проверки (для комментаторов).

два × 2 =

|