Полное руководство. CSS Background. Полное руководство В чем разница между img и background-image
И здесь мы подошли к главному, перефразируем так: "Сайт начинается с фона". Большинство блогеров делают "классические блоги" с белым фоном, но мы пойдем другим путем. Пройти мимо замечательного свойства CSS background-image , мы никак не можем.
А что оно делает? Это свойство CSS background-image вставляет картинку в качестве фона в разные элементы HTML -страницы. Оно не ограничивается только тегом body , а широко применяется в оформлении сайта, например для: div, li, p, table, header, footer .
Рассмотрим пример:
Дизайн сайта начинается с фона.
Будет корректным прописать цвет у фона – свойство background-color , для подстраховки, если не загрузится картинка. В скобочках url () указать путь до папки с картинками.
По умолчанию изображение будет повторяться, как "кафельная плитка", пока не заполнит собой весь экран браузера, по мере продвижения вниз страницы, наша "плитка" заполнит и второй экран и третий, ровно столько, пока не закончится содержание страницы. Понятно, что такой результат не верх дизайнерской мысли, да и у нас будет не "ванная комната", а всего лишь блог, где читабельность - очень важный момент.
Простой вариант, чтобы избавиться от "кафельности", это использовать картинку с большими размерами, не менее 1024 px в ширину,чтобы она заполнила собой весь экран. Тоже будет хорошим решением найти бесшовную текстуру, при размножении которой, рисунок будет как одно целое.
Как сделать фон более привлекательным?
Слава богу у нас для этого есть помощники:
- no-repeat – запретить повтор
- repeat-x – повторение рисунка только по горизонтали
- repeat-y – повторение рисунка только по вертикали
Например:
Шапка блога
Это фоновая текстура с повторением только по горизонтали
Следующий помощник - свойство background-position , позволяет позиционировать фоновую картинку в любом месте экрана. Этот прием широко распространен в современном веб-дизайне. У нас есть картинка, но она не часть контента, а служит лишь как украшение сайта.
Заголовок
Пример неповторяющегося фона с заданным позиционированием.
Картинка отображается только один раз и находится справа.
Задан отступ от правого края в 200 px во избежании наезда текста на фон.
Если мы хотим, чтобы картинка всегда была видна при прокрутки экрана вниз, надо добавить в код выше свойство - background-attachment: fixed;
В чем разница между img и background-image?
Разница принципиальная, тег img вставляется непосредственно в тело HTML -страницы и отвечает за содержание (иллюстрации, фотографии, аватарки), несет смысловую нагрузку. Очень важно, чтобы картинка была проиндексирована поисковыми системами и попала в поисковую выдачу. Свойства CSS background-image – делают сайт уникальным и красивым, то есть это оформление, которое следует выносить во внешний файл CSS стилей или использовать внутри элемента style .
Конечно, это не значит, что background-image не будет работать, если его поместить в тело HTML -страницы. Но я настоятельно рекомендую все, что касается дизайна выносить в CSS . В результате мы получим чистый HTML -код:
- это позитивно скажется на индексации сайта, поисковые боты будут любить ваш сайт и чаще на него заходить.
- ваши посетители тоже останутся довольны, сайт будет быстрее загружаться из-за маленького веса.
- вам, как веб-мастеру, проще работать с чистым кодом.
Ну вот мы и рассмотрели более-менее все варианты с использованием свойства CSS background-image . Побольше практики друзья! Смело копируйте код и придумывайте свои варианты!
Краткая информация
Версии CSS
Значения
url В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. none Отменяет фоновое изображение для элемента. inherit Наследует значение родителя.HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
document.getElementById("elementID ").style.backgroundImage
Браузеры
Internet Explorer до версии 7.0 включительно применяет фон к внутренней части границы элемента, у которого установлено свойство hasLayout . Если у элемента нет hasLayout , свойство background-image будет учитывать границы элемента, как это и задано в спецификации. Разница в отображении будет заметна, если границы пунктирные (dashed или dotted ), а не сплошные.
Если для элемента значение установлено как scroll или auto , в Internet Explorer 8 будет вертикальная задержка в один пиксел при прокрутке фона.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Если фон задаётся для строки таблицы (тег
HTML5 CSS2.1 IE Cr Op Sa Fx
1 | 2 | 3 |
Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).
Рис. 1. Повторение фона для каждой ячейки
Рис. 2. Фон для всей строки
Краткая информация
Версии CSS
Значения
url В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. none Отменяет фоновое изображение для элемента. inherit Наследует значение родителя.HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
document.getElementById("elementID ").style.backgroundImage
Браузеры
Internet Explorer до версии 7.0 включительно применяет фон к внутренней части границы элемента, у которого установлено свойство hasLayout . Если у элемента нет hasLayout , свойство background-image будет учитывать границы элемента, как это и задано в спецификации. Разница в отображении будет заметна, если границы пунктирные (dashed или dotted ), а не сплошные.
Если для элемента значение установлено как scroll или auto , в Internet Explorer 8 будет вертикальная задержка в один пиксел при прокрутке фона.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Если фон задаётся для строки таблицы (тег
HTML5 CSS2.1 IE Cr Op Sa Fx
1 | 2 | 3 |
Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).
Рис. 1. Повторение фона для каждой ячейки
Рис. 2. Фон для всей строки
background-image:
Описание
Свойство background-image (от англ. "background image" ‒ «фоновое изображение») устанавливает фоновое изображение элемента .
Примечание
При установке фонового изображения, следует также указывать цвет фона, который будет использован в случае, если изображение недоступно. В случае же, когда изображение доступно, оно отображается поверх цвета фона. (Таким образом, цвет будет виден в прозрачных частях изображения).
Условия использования
Начиная с CSS3 (через запятую) можно указать сразу несколько фоновых изображений. При этом нижние фоновые изображения будут видны через прозрачные области верхних фоновых изображений.
JavaScript
[объект] .style .backgroundImage ="[значение]";
Поддержка браузерами
Спецификация
Значения
Все значения CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
None
Указывает на отсутствие фонового изображения.
url(
background-image: url(myImage.png );
Url("
background-image: url("myImage.png ");
Inherit Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: « none ».
Пример использования
Листинг кода
Фоновое изображение
Документ с несколькими фоновыми изображениями.
>
>
Фоновое изображение
Документ с несколькими фоновыми изображениями.
>