Как заставить background-size работать в старых IE

Всем нам, иногда, хочется сделать красивый фоновый рисунок, в той или иной области сайта.
Еще чаще, в этом случае, нам хочется, чтобы фон не искажался при изменении размеров окна браузера.
Иногда это можно сделать с помощью img, у которого одно из измерений (ширина или высота) заданы в %, иногда нужно более гибкое решение (хотя бы потому, что фон это фон, а на картинке, без специальных приемов, содержимое не разместить).

На ум приходит использование свойства CSS background-image, которое устанавливает фоновое изображение для элемента. Однако, без дополнительных тегов, изображение привязано к левому верхнему углу и обрезается, в случае если размер элемента меньше изображения, и, появляются белые области справа и снизу, если размер элемента больше.

Следующее, что приходит на ум, это поиск дополнительных свойств CSS, которые помогут настроить фон. Ими являются background-repeat, background-position и background-size.
Вот здесь и начинаются проблемы, точнее, с background-size, так как это свойство не поддерживается IE8 и, даже, IE9 в quirks mode.

Есть два решения этой проблемы:

• Правильное (воспользоваться костылями).
• Быстрое (оставить пользователей XP, с их последним доступным IE8, без красивого фона).

Если вы выбрали правильное решение, то вот, что есть на просторах Интернет:

1. Родные костыли для IE

Иногда допустимо растягивание и сжатие фонового рисунка, так как пользователь не заметит разницы (градиент в однопиксельную полоску может растянуться на всю ширину страницы и отлично выглядеть)
Для этого добавляем в качестве 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 и не навредят нормальным браузерам.

2. jquery.backgroundSize.js

Данный плагин помечен автором, как устаревший, тем не менее, он работает.
Преимущества:

• Работает для IE6, IE7, IE8.
• Отключается, если браузер поддерживает свойство background-size.

Недостатки:

• Работает либо для всех браузеров (даже поддерживающих background-size), либо не работает в IE9 в quirks mode (а он тоже не поддерживает background-size). Связано со способом подключения через условный комментарий.
• Не поддерживает обновление рисунка при смене размера элементом (без смены размера окна).
• Поддерживает только свойства cover и contain.
• Задавать свойство background-size нужно с помощью jQuery.
• Требует jQuery для работы.

Чтобы воспользоваться этим решением, необходимо подключить его к странице так:

<!-- 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" );

3. background-size-polyfill

Является развитием решения № 2.
Преимущества:

• Для работы не нужны внешние библиотеки.
• Задание свойства background-size происходит почти привычным образом (нужно добавлять -ms-behavior: url(/backgroundsize.min.htc);).
• Поддерживает и другие значения background-size, помимо cover и contain.

Недостатки:

• Позиционирует себя как решение для IE8, однако, кое-как, работает с IE7 и не работает в IE6.
• Не работает в IE8 в quirks mode.
• Не поддерживает обновление рисунка при смене размера элементом (без смены размера окна).
• Нет проверки на версию браузера, поэтому вставляет div с img во все элементы с background-size и -ms-behavior, даже если браузер поддерживает это свойство.

Чтобы воспользоваться этим решением, необходимо поместить файл .htaccess, взятый с сайта этого решения, в корень сайта, а backgroundsize.min.htc куда захочется.
При задании свойств CSS для элемента, вместе с background-size нужно задавать свойство -ms-behavior: url(путь_к_вашему_куда_захочется/backgroundsize.min.htc);

4. background-size-emu

Решение базируется на идеях решения № 3.
Преимущества:

• Для работы не нужны внешние библиотеки.
• Задание свойства background-size происходит привычным образом (не нужно ничего никуда добавлять).
• Поддерживает и другие значения background-size, помимо cover и contain.
• Работает в IE6, IE7, IE8, IE9 в quirks mode.
• Отключается, если браузер поддерживает свойство background-size.
• Поддерживает обновление картинки, при смене размера элементом, без смены размера окна браузера.

Недостатки:

• Обновляет рисунки с полусекундной задержкой, в случае их динамического добавления на страницу и мгновенно — при изменениях размера.
• Немного грузит старые IE, так как раз в 500 миллисекунд сканирует все элементы DOM на странице и определяет, что нужно обновлять, а что нет.

Чтобы воспользоваться этим решением, необходимо просто подключить скрипт к странице.
<script type = "text/javascript" src = "background_size_emu.js"></script>

Общие проблемы

Решения № 2, №3 и №4 вставляют в элемент, для которого задан background-size, абсолютно позиционированный div с img внутри и меняют размер картинки в зависимости от размера элемента.

Так как это тот еще костыль, всеми решениями не поддерживается:

• Несколько фоновых картинок.
• 4-х значный синтаксис background-position.
• background-repeat (нет никаких повторений).
• Нестандартные значения для background-[clip/origin/attachment/scroll] (если поменять значения, то это ни на что не повлияет).

На последок

Все вышеперечисленные библиотеки доступны на GitHub. Поиск производится по названию.

Автор: Metafalica

Источник