- PVSM.RU - https://www.pvsm.ru -
Всем нам, иногда, хочется сделать красивый фоновый рисунок, в той или иной области сайта.
Еще чаще, в этом случае, нам хочется, чтобы фон не искажался при изменении размеров окна браузера.
Иногда это можно сделать с помощью img, у которого одно из измерений (ширина или высота) заданы в %, иногда нужно более гибкое решение (хотя бы потому, что фон это фон, а на картинке, без специальных приемов, содержимое не разместить).
На ум приходит использование свойства CSS background-image, которое устанавливает фоновое изображение для элемента. Однако, без дополнительных тегов, изображение привязано к левому верхнему углу и обрезается, в случае если размер элемента меньше изображения, и, появляются белые области справа и снизу, если размер элемента больше.
Следующее, что приходит на ум, это поиск дополнительных свойств CSS, которые помогут настроить фон. Ими являются background-repeat [1], background-position [2] и background-size [3].
Вот здесь и начинаются проблемы, точнее, с background-size, так как это свойство не поддерживается IE8 и, даже, IE9 в quirks mode.
Есть два решения этой проблемы:
Если вы выбрали правильное решение, то вот, что есть на просторах Интернет:
Иногда допустимо растягивание и сжатие фонового рисунка, так как пользователь не заметит разницы (градиент в однопиксельную полоску может растянуться на всю ширину страницы и отлично выглядеть)
Для этого добавляем в качестве CSS свойств следующее:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif', sizingMethod='scale')";
images/logo.gif это путь к фоновой картинке.
Эти свойства понимаются только IE и не навредят нормальным браузерам.
Данный плагин помечен автором, как устаревший, тем не менее, он работает.
Преимущества:
Недостатки:
Чтобы воспользоваться этим решением, необходимо подключить его к странице так:
<!-- The flag should be inserted before loading the script -->
<script>$.debugBGS = true;</script>
<!--[if lt IE 9]> <script src="/path/to/jquery.backgroundSize.min.js"></script> <![endif]-->
И задавать свойство background-size для элементов так:
$(elem).css( "background-size", "cover" );
Является развитием решения № 2.
Преимущества:
Недостатки:
Чтобы воспользоваться этим решением, необходимо поместить файл .htaccess, взятый с сайта этого решения, в корень сайта, а backgroundsize.min.htc куда захочется.
При задании свойств CSS для элемента, вместе с background-size нужно задавать свойство -ms-behavior: url(путь_к_вашему_куда_захочется/backgroundsize.min.htc);
Решение базируется на идеях решения № 3.
Преимущества:
Недостатки:
Чтобы воспользоваться этим решением, необходимо просто подключить скрипт к странице.
<script type = "text/javascript" src = "background_size_emu.js"></script>
Решения № 2, №3 и №4 вставляют в элемент, для которого задан background-size, абсолютно позиционированный div с img внутри и меняют размер картинки в зависимости от размера элемента.
Так как это тот еще костыль, всеми решениями не поддерживается:
Все вышеперечисленные библиотеки доступны на GitHub. Поиск производится по названию.
Автор: Metafalica
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/ie8/68269
Ссылки в тексте:
[1] background-repeat: http://htmlbook.ru/css/background-repeat
[2] background-position: http://htmlbook.ru/css/background-position
[3] background-size: http://htmlbook.ru/css/background-size
[4] Источник: http://habrahabr.ru/post/234447/
Нажмите здесь для печати.