Почему может не работать background size

Как заставить 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: cover — не правильно работает на мобильных девайсах

Здравствуйте, уважаемые знатоки! Такая проблемка: на некоторых мобильных девайсах, фон прорисовывается не полностью.

скрин: http://prntscr.com/781vxs В чем может быть проблема и как ее решить?

3 ответа 3

Попробуйте такой варинат

У меня заработало после того как я убрал свойство background-repeat: no-repeat; В принципе оно и не нужно при background-size: cover;

Обычно такое происходит, когда используется width: 100% у фоновой картинки или у родительского элемента. Т.к. такая ширина будет рассчитана на основе ширины экрана на устройстве в вашем случае.

На странице у вас видимо есть элемент, у которых width больше чем 100% (ширина экрана) и есть возможность прокрутить контент влево/вправо (может быть лишний padding или margin стоит, или фиксированная ширина у какого-то элемента есть).

Чтобы от этого избавиться добавьте min-width для фона равную минимальной ширине, которую хотите установить, или поправьте элементы, которые вылезают.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css3 адаптивная-верстка или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Не работает 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 не работает
Фоновое изображение не хочет нормально адаптивиться, мне нужно чтобы высота изображения была.

Background-size: cover и contain. В чём разница?
Приветствую! Цитирую: cover Масштабирует изображение с сохранением пропорций так, чтобы его.

Background-size неправильно работает в Firefox
Вы скорее всего уверенны что я что то делаю не правильно. Конечно, ведь свойство не новое и хорошо.

Источник

background-size: cover — не правильно работает на мобильных девайсах

Здравствуйте, уважаемые знатоки! Такая проблемка: на некоторых мобильных девайсах, фон прорисовывается не полностью.

скрин: http://prntscr.com/781vxs В чем может быть проблема и как ее решить?

3 ответа 3

Попробуйте такой варинат

У меня заработало после того как я убрал свойство background-repeat: no-repeat; В принципе оно и не нужно при background-size: cover;

Обычно такое происходит, когда используется width: 100% у фоновой картинки или у родительского элемента. Т.к. такая ширина будет рассчитана на основе ширины экрана на устройстве в вашем случае.

На странице у вас видимо есть элемент, у которых width больше чем 100% (ширина экрана) и есть возможность прокрутить контент влево/вправо (может быть лишний padding или margin стоит, или фиксированная ширина у какого-то элемента есть).

Чтобы от этого избавиться добавьте min-width для фона равную минимальной ширине, которую хотите установить, или поправьте элементы, которые вылезают.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css3 адаптивная-верстка или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Перестал работать css, никак не работает свойство background-image

Неожиданно перестал работать css,просто никак не работает свойство background-image(вместо указанной картинки просто белый фон),по разному пробовал
Но если пихнуть картинку в html коде в див,то она отображается,и если с css начать править размеры div,то сам див правится и картинка встает на нужные места,то есть css вроде как работает
Помогите пожалуйста,в чем причина и как это решить?

Комментарий модератора

Запрещено размещать задания и решения в виде картинок и других файлов с их текстом! Перепечатывайте код на форум или прикладывайте файлы к сообщению.

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Не работает свойство background в CSS
body < width:100%; height:400px; background:url(img/p1.jpg) no-repeat 50% 50% / cover;.

Не срабатывает свойство background-image в IE
Всем привет. При верстке не отображается картинка, заданная с помощью свойства background-image.

Из css не подгружается background-image
Добрый день! Не могу понять почему не подгружается картинка для background описанная в CSS.

Смена фона CSS background-image
Как в CSS поставить смену картинки фона из папки images с картинками image1.jpg-image5.jpg ? Не.

Источник