И здесь мы подошли к главному, перефразируем так: "Сайт начинается с фона". Большинство блогеров делают "классические блоги" с белым фоном, но мы пойдем другим путем. Пройти мимо замечательного свойства CSS background-image , мы никак не можем.
А что оно делает? Это свойство CSS background-image вставляет картинку в качестве фона в разные элементы HTML -страницы. Оно не ограничивается только тегом body , а широко применяется в оформлении сайта, например для: div, li, p, table, header, footer .
Рассмотрим пример:
Будет корректным прописать цвет у фона – свойство background-color , для подстраховки, если не загрузится картинка. В скобочках url () указать путь до папки с картинками.
По умолчанию изображение будет повторяться, как "кафельная плитка", пока не заполнит собой весь экран браузера, по мере продвижения вниз страницы, наша "плитка" заполнит и второй экран и третий, ровно столько, пока не закончится содержание страницы. Понятно, что такой результат не верх дизайнерской мысли, да и у нас будет не "ванная комната", а всего лишь блог, где читабельность - очень важный момент.
Простой вариант, чтобы избавиться от "кафельности", это использовать картинку с большими размерами, не менее 1024 px в ширину,чтобы она заполнила собой весь экран. Тоже будет хорошим решением найти бесшовную текстуру, при размножении которой, рисунок будет как одно целое.
Слава богу у нас для этого есть помощники:
Например:
Это фоновая текстура с повторением только по горизонтали
Следующий помощник - свойство background-position , позволяет позиционировать фоновую картинку в любом месте экрана. Этот прием широко распространен в современном веб-дизайне. У нас есть картинка, но она не часть контента, а служит лишь как украшение сайта.
Пример неповторяющегося фона с заданным позиционированием.
Картинка отображается только один раз и находится справа.
Задан отступ от правого края в 200 px во избежании наезда текста на фон.
Если мы хотим, чтобы картинка всегда была видна при прокрутки экрана вниз, надо добавить в код выше свойство - background-attachment: fixed;
Разница принципиальная, тег img вставляется непосредственно в тело HTML -страницы и отвечает за содержание (иллюстрации, фотографии, аватарки), несет смысловую нагрузку. Очень важно, чтобы картинка была проиндексирована поисковыми системами и попала в поисковую выдачу. Свойства CSS background-image – делают сайт уникальным и красивым, то есть это оформление, которое следует выносить во внешний файл CSS стилей или использовать внутри элемента style .
Конечно, это не значит, что background-image не будет работать, если его поместить в тело HTML -страницы. Но я настоятельно рекомендую все, что касается дизайна выносить в CSS . В результате мы получим чистый HTML -код:
Ну вот мы и рассмотрели более-менее все варианты с использованием свойства CSS background-image . Побольше практики друзья! Смело копируйте код и придумывайте свои варианты!
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 (через запятую) можно указать сразу несколько фоновых изображений. При этом нижние фоновые изображения будут видны через прозрачные области верхних фоновых изображений.
[объект] .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 ».
Листинг кода
Документ с несколькими фоновыми изображениями.
Документ с несколькими фоновыми изображениями.
Думаю, нет ни одного сайта, где не использовалось бы свойство CSS background
. Казалось бы, что может быть проще этого свойства? Но нет, его возможности гораздо шире обычного назначения картинки или цвета в качестве фона страницы. Что-то будет знакомым, а что-то наверняка для многих станет новинкой. В любом случае — досконально знать, как работает background будет полезно.
CSS3 привнес немало нового в свойство, это и прозрачность, и назначение нескольких изображений в качестве фона, но об этом мы поговорим ниже, а для начала рассмотрим основы свойства background
.
Я более чем уверен — вы уже неоднократно делали назначение цвета фона. Сделать это можно используя несколько видов записи: обычную(используется название цвета), шестнадцатиричную или RGB-запись. Каждый тип равнозначен, используйте какой больше нравится. Я стараюсь использовать наиболее короткий вариант, и для восприятия попроще и файл стилей чуть поменьше получается размером.
P {background-color: red;} p {background-color: #f00;} p {background-color: #ff0000;} p {background-color: rgb(255, 0, 0;)}
В CSS3 внедрена поддержка прозрачности, поэтому можно и ее добавить к нашему цвету, например так:
P {background-color: rgba(255, 0, 0, 0.5);}
Последней цифрой установили прозрачность в 50%. Можно установить значение прозрачности от 0 (полностью прозрачный фон) до 1 (полностью непрозрачный).
Это свойство тоже используется очень часто, позволяет присваивать фону изображение. В CSS3 добавлена возможность присваивать фону несколько изображений, причем каждое создает своеобразный слой, поэтому каждое последующее накладывается на предыдущее. Зачем это может пригодиться? Все достаточно просто — допустим, нужно прикрутить рюшечки в каждом из углов сайта. При условии более-менее резиновой верстки использовать одно изображение — не вариант. Поэтому делаем 4 «слоя», каждое изображение двигаем в свой угол и на этом все, задача решена
Body {background-image: url("image1"), url("image2"), url("image3")}
Если нужно назначить одно изображение на фон — в коде оставляем только первое, думаю, это понятно.
Используя любые изображения в качестве фона следует помнить два правила:
Поддержка нескольких изображений для фона достаточно широка. Все браузеры, даже IE8, поддерживают это свойство.
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. Фон для всей строки