Пуленепробиваемый background-size
Задача масштабирования фонового изображения согласно заданным размерам довольно часто встречается на практике. Например, растянуть фоновую картинку на все окно браузера.
Собрав в кучу CSS2, CSS3, фильтры для IE и специфические вендорные префиксы для разных браузеров, получаем почти кроссбраузерное решение поставленной задачи.
html, body { height:100%; width:100%; margin:0; padding:0; } body { background-attachment: fixed; background-image: url('images/body_bg.jpg'); background-repeat: no-repeat; background-position: center center; -o-background-size: 100% 100%; /* opera ≥ 9.5 */ -webkit-background-size: 100% 100%; /* Safari ≥ 5.0, Chrome ≥ 4.0 */ -khtml-background-size: 100% 100%; /* Konqueror ≥ 3.5.4 */ -moz-background-size: 100% 100%; /* Firefox ≥ 3.6 */ background-size: 100% 100%; /* браузеры с поддержкой CSS3: FF ≥ 4, Opera ≥ 10.53, IE ≥ 9.0 */ } /* Через условные комментарии или хаки пишем стили для IE */ * html body { /* IE8 */ -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/google-chrome.jpg',sizingMethod='scale')"; /* IE < 8 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/body_bg.jpg', sizingMethod='scale'); background-image: none; /* IE ≤ 9.0 */ }
Поддержка браузерами
Поддержка | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) | Konqueror |
---|---|---|---|---|---|---|
Базовая | 1.0 — webkit | 3.6 (1.9.2) — moz | 9.0 | 9.5 — o | 3.0 (522) — webkit | 3.5.4 |
3.0 | 4.0 (2.0) | 10.0 | 4.1 (532) | |||
Для contain и cover |
3.0 | 3.6 (1.9.2) | 9.0 | 10.0 | 4.1 (532) | — |
Для SVG backgrounds | — | 8.0 (8.0) | — | — | — | — |
Не применяйте фильтры для тега <html>
— это приведет ко множеству проблем.
RTFM
- background-size
- -o-background-size
- -webkit-background-size
- -moz-background-size
- Specify the size of background images
Ссылки
- Пример реализации
- Perfect Full Page Background Image
- Scale Background image to browser size
- Фильтр AlphaImageLoader
- Избавляемся от CSS хаков в Internet Explorer
Не пашет в осле 1 фиг картинка растянута по оригинальному размеру а не по div блоку
Версия ОС и версия ИЕ какие, в каком режиме осел? Doctype какой? Картинка фоном лежит для блока? Размеры блока указаны? Не помешает пример.
Появляется вертикальная полоса прокрутки в браузерах, отличных от IE, хотя содержимое меньше половины экрана.
overflow
?Неустановлено.
И ещё к body можно добавить «background-attachment: fixed;», тогда оно никуда ездить вместе со скроллингом не будет.
Самом собой можно.
Не работает в IE6-8 Последняя стройка background-image: none; убирает картинку,
то есть её нет больше,не пойму смысл тогда зачем эта строка. Расскажите чуть подробней
как всё же её растянуть для ie-6-8 ,если 6 не получится,то хотя бы 7 и 8. Может ещё какие
методы есть?
Для ИЕ6-7 строки 20-26: скрываем оригинальный фон и растягиваем его через фильтр. Вы не в IETester смотрите — там бывают проблемы.
Разобрался,я не так сделал просто. Правда ещё дописал вот такую строку
background-attachment:fixed;
Она дала зафиксировать картинку в нормальных браузерах. Проверяю конечно же в
IETester лучше не чё не попадалось,если есть что посоветуйте. Но есть ещё
маленький глюк,а именно в настоящем браузере Ie-8. Уменьшаю рабочий экран
до 10% и фон исчезает,только после перезагрузки вновь появляется. А в IETester
нет такого клюка даже в ie-6 как быть,куда картинка пропадает? А так сайт
классный,спасибо сегодня с 11 утра искал как растянуть картинку для ie и
везде только вилами по воде,но если ещё лучше показать и с примерами,то класс
будет для новичков.Щас записывать буду курс по CSS и обязательно порекомендую
Ваш сайт.
Лучше IETester пока ничего не придумно. Можно, конечно, в виртуальной машине запустить все ОС и на них поставить настоящие ИЕ, но это геморр.
Избавиться с проблемами в ИЕ можно будет попробовать при помощи expression или jQuery (как в статье у Криса Койера).
Пример добавил в ссылки.
Глянул код,помогло,даже малость лучше чем я ожидал,а то есть данный код уменьшил
картинку путём отдаления,что я и хотел,но визуально получилось её размножение в IE.
Но у меня картинка одного тона,так что нормально вышло. А для нормальный браузеров
я поставил репитеться её. В общем нормально у меня вышло. Да ещё хотел спросить,у Вас
как то сайт криво отображается,то есть правая колонка упала вниз и чтоб прочесть текст
надо идти в низ и сдвигать там прокрутку,что реально не удобно,я в Мозиле смотрю 8 версия.
Спасибо за багфикс. Поправим. У вас Windows?
Да XP SP3,работаю по старинке. 7 не устраивает из-за своих недоработок мелких,но для
меня значительных. Я так понял Вы программист,услуги дорого стоят Ваши? Где можно
спросить об этом,если что пишите на мыло,что я ввожу.
Об этом можете спросить по аське.
Я тут зарегинелся,только вот не пойму а где же аська твоя? Или сюда выложишь?
Все данные есть в контактах.
Все почти здрово! 🙂
Одна проблемка которую никто пока не указал.
При использовании конструкции в ИЕ (проверял в 7 и 8 ) становятся недоступны ссыли в тексте страниц, т.к. они накрываются изображением фильтра AlphaImageLoader.
Если подскажите решение — буду весьма благодарен.
Спасибо за код в любом случае!
Обычно для ссылок пишут
position: relative;
Всё бы хорошо, но для случая когда repeat-x, repeat-y или просто repeat?
Как вы себе представляете картинку, растянутую на весь экран по ширине и высоте да еще и повторяющуюся? Да и в статье пример для случая, когда width=100% и height=100%
За костыли для IE спасибо! Для фоток лучше значение cover ставить. Оно сохранит пропорции самой фотографии (background-size:cover;)
Спасибо:))) Помог.
Рад помочь
Почему то в ие7 фоновая картинка таким образом не отображается. То есть фильтр progid:DXImageTransform.Microsoft.AlphaImageLoader не подгружает картинку. Может для этого нужны какие то определенные условия? Пытаюсь таким образом сделать бэкграунд для дива.
hasLayout включить нужно, без этого фильтры не работают. А мой пример внизу страницы работает?
Спасибо! Указала для элемента overflow: hidden и все замечательно заработало. Еще добавлю что для внутренних элементов желательно отменять фильтр, так как например радио кнопки перестали работать в блоке. Какой пример внизу страницы, не поняла.
Пример реализации
Да, пример работает, не заметила его.
Спасибо, помогли.
Рад стараться!
Здравствуйте !
Помогите пожалуйста советом.У меня на сайте картинка стоит размером 1368х768.Я думал что в мониторах с разным разрешением она будет растягиваться и выглядеть пристойно. Но увы. Может есть способ дать команду подстраиваться под различные мониторы? В противном случае придется делать картинку 1920×1080. Лишние боковые части для уменьшения веса картинки придется закрыть при помощи свойства background-repeat: repeat;. Отсюда у меня к Вам второй вопрос. Можно ли задать при помощи background-repeat: repeat; и background-position: размножение картинки в строго ограниченной области? Например: от одной точки и до другой по вертикали и тоже самое по горизонтали.
Если вы применили способ из поста — картинка будет растягиваться. Мой пример смотрели?
Пример смотрел.Класно,меня устраивает.Дело в том что я на пути обучения и
если Вы подскажите как применить Ваш способ буду благодарен.Я скопировал
весь код и на абум решил вставил в main.css в место #bg { background: url(../images/bg.jpg) no-repeat fixed 50% #5F3115;}. Dreamweaver пишет о не корректной установке.Я заранее знал что вряд ли выйдет, но решил про-экспериментировать.
Пример ваш показать сможете?
Вот нашел еще вариант.
body {
background: url(../images/bg.jpg) top center fixed no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/bg.jpg’, sizingMethod=’scale’);
-ms-filter: «progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/bg.jpg’, sizingMethod=’scale’)»;
overflow: auto;
}
Вставил в стиль CSS вместо #bg { background: url(../images/bg.jpg) и появились изменения.В разных браузерах смотрел,выглядит нормально.Не знаю правда как в разрешениях 1440×900, 1600×1200 и 1920×1080.
С удовольствием попробовал бы Ваш код,(он у Вас «серьезнее») но не знаю куда и что вставлять чтобы Dreamweaver не выдавал ошибку.Не разберусь куда писать стили для IE?
В вашем случае:
body {
background: url(../images/bg.jpg) top center fixed no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
/* Дальше стили под ИЕ */
* html body {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/bg.jpg’, sizingMethod=’scale’);
-ms-filter: «progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/bg.jpg’, sizingMethod=’scale’)»;
overflow: auto;
}
Заменил все значения-100% на cover и фоновая картинка стала строго устанавливаться по высоте.
Спасибо за сотрудничество и уделенное мне внимание!
Cover не работает, только scale
В каком браузере и какой версии? У меня везде работало. Покажите ваш код.
помоему в IE8 не работает этот способ, или я ошибаюсь?
Работает через фильтры. Проверьте
Не хочет работать в IE8 =\
body {
background-image: url(../images/tex.jpg);
background-repeat: no-repeat;
background-position: center center;
-o-background-size: 100% 100%; /* opera ≥ 9.5 */
-webkit-background-size: 100% 100%; /* Safari ≥ 5.0, Chrome ≥ 4.0 */
-khtml-background-size: 100% 100%; /* Konqueror ≥ 3.5.4 */
-moz-background-size: 100% 100%; /* Firefox ≥ 3.6 */
background-size: 100% 100%; /* браузеры с поддержкой CSS3: FF ≥ 4, Opera ≥ 10.53, IE ≥ 9.0 */
}
body {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/tex.jpg’, sizingMethod=’scale’);
-ms-filter: «progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/tex.jpg’, sizingMethod=’scale’)»;
overflow: auto;
}
Мой пример в ИЕ8 работает? На моей машине — да!
Спасибо, помогло 🙂
Рад стараться )))
Добрый день. Подскажите как решить проблему отсутствия кликабельности кнопок после применения фильтра в IE8. В комментариях говорили, что нужно отменять действие фильтра для элементов внутри блока div. //-ms-filter:»progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’false’)»;// Ставлю вот этот код, но результата нет. Подскажите, может что-то не так делаю.
position: relative
В опера не работает.
Информация о версии
Версия:
12.16
Сборка:
1860
Платформа:
Linux
Система:
x86_64, 3.13.0-36-generic