Еще чаще, в этом случае, нам хочется, чтобы фон не искажался при изменении размеров окна браузера.
Иногда это можно сделать с помощью 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. Поиск производится по названию.
This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.
Комментариев нет:
Отправить комментарий