Как заставить 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 свойств следующее:
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 для работы.
Чтобы воспользоваться этим решением, необходимо подключить его к странице так:
И задавать свойство background-size для элементов так:
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 на странице и определяет, что нужно обновлять, а что нет.
- Не может подменять фон для элемента TR.
Чтобы воспользоваться этим решением, необходимо просто подключить скрипт к странице.
Общие проблемы
Решения №2, №3 и №4 вставляют в элемент, для которого задан background-size, абсолютно позиционированный div с img внутри и меняют размер картинки в зависимости от размера элемента.
Так как это тот еще костыль, всеми решениями не поддерживается:
- Несколько фоновых картинок.
- 4-х значный синтаксис background-position.
- background-repeat (нет никаких повторений).
- Нестандартные значения для background-[clip/origin/attachment/scroll] (если поменять значения, то это ни на что не повлияет).
- Подмена фона для элементов, в которых не может быть вложенных элементов.
Источник
background-size contain is not working
Im using jplayer and trying to stylize the play button but it is not working, here is part of the control panel codes:
for comparison, here is the style of the li and a around play button and stop button
From the development tool, both styles have totally no difference. However I can tell that the background-size: contain is not working as the play button does not really shrink to the size of a but the stop button (or even the rest of the buttons) just work as fine. Anyone has any idea about it?
Please let me know any information you need that would help! Thanks!
1 Answer 1
The use of !important on your background property is the problem. Since you’re using the shorthand syntax for the background property, you’re also setting all of the browser defaults to !important as well. Basically anything that you’re not declaring explicitly in the shorthand.
The background CSS shorthand property assigns explicit given values and sets missing properties to their initial values. (emphasis mine)
Those ‘initial values’ include: background-size: auto auto . So you’re basically writing:
Of course, the declaration with !important wins.
If you really need the !important declaration, put it on the specific property you’re targeting (like background-repeat or whatever.
Here’s a working example. The third uses !important.
Источник
background-size
Описание
Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.
| Начальное значение | auto auto |
|---|---|
| Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | нет |
| Проценты | относительно области позиционирования фона |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | repeatable list of simple list of length, percentage, or calc |
Синтаксис
Значения
, которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением background-origin . Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если attachment фона является fixed , область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются. auto Значение позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции. contain Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций. cover Ключевое слово, обратное contain . Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево / вправо, либо сверху / снизу.
Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.
Предупреждение: Это поведение изменилось в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.
Фоновые изображения, сгенерированные из элементов с использованием -moz-element (en-US) (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.
Визуализированный размер фонового изображения затем вычисляется следующим способом:
Если оба атрибута в background-size заданы и различны от auto : Фоновое изображение отображается в указанном размере. Если background-size содержит contain или cover : Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона. Если background-size установлен как auto или auto auto : Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан contain . Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона. Если background-size содержит один атрибут auto и один не- auto : Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.
Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.
Формальный синтаксис
Примеры
Эта демонстрация background-size: cover и эта демонстрация background-size: contain предназначены для открытия в новых окнах, чтобы вы могли видеть, как contain и cover ведут себя, когда размеры области расположения фона изменяются. Эта серия демонстраций, как работает background-size и взаимодействует с другими свойствами background-* , должна в значительной степени охватить оставшуюся основу в том, как использовать background-size отдельно и в сочетании с другими свойствами.
Замечания
Если вы указываете градиент в качестве фона и указали background-size , который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, background-size: 50% ). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения.
Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер auto с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.
Источник
Не работает cover в background-size
Я работаю под FireFox последней версии, поэтому -moz-background-size:cover; не использую, который нужно было использовать до версии 4.0 FireFox.
В браузерах Хром, IE, при нахождении файла-фона в каталоге рядом со страницей, и при изображении jpg или png – вид тот же: ширина во весь экран, а по высоте показывается верхняя часть фона (где-то 1/3 изображения или 1/4), при «background:url(‘img1.jpg’) 50% 50% no-repeat;» — выводится средняя часть изображения. Как сделать полное изображение по вертикали?
Добавлено через 35 минут
Если имя файла картинки поместить в одинарные кавычки – то же самое.
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Background-size cover не работает
Фоновое изображение не хочет нормально адаптивиться, мне нужно чтобы высота изображения была.
Приветствую! Цитирую: cover Масштабирует изображение с сохранением пропорций так, чтобы его.
Вы скорее всего уверенны что я что то делаю не правильно. Конечно, ведь свойство не новое и хорошо.
Источник