И здесь мы подошли к главному, перефразируем так: "Сайт начинается с фона". Большинство блогеров делают "классические блоги" с белым фоном, но мы пойдем другим путем. Пройти мимо замечательного свойства 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 . Побольше практики друзья! Смело копируйте код и придумывайте свои варианты!

background-image: | none; background-image: | none | inherit; background-image: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | none

Описание

Свойство background-image (от англ. "background image" ‒ «фоновое изображение») устанавливает фоновое изображение элемента .

Примечание

При установке фонового изображения, следует также указывать цвет фона, который будет использован в случае, если изображение недоступно. В случае же, когда изображение доступно, оно отображается поверх цвета фона. (Таким образом, цвет будет виден в прозрачных частях изображения).

Условия использования

Начиная с CSS3 (через запятую) можно указать сразу несколько фоновых изображений. При этом нижние фоновые изображения будут видны через прозрачные области верхних фоновых изображений.

JavaScript

[объект] .style .backgroundImage ="[значение]";

Поддержка браузерами

Спецификация

Значения

Все значения CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

None Указывает на отсутствие фонового изображения. url() Указывает строку URI-адреса изображения внутри « url(...) ».

background-image: url(myImage.png );

Url("") Указывает строку URI-адреса изображения внутри « url(...) ». При этом строка URI-адреса выделяется символами « " » ДВОЙНОЙ КАВЫЧКИ .

background-image: url("myImage.png ");

Inherit Указывает, что элемент должен унаследовать параметры родительского элемента.

Начальное значение: « none ».

Пример использования

Листинг кода

Фоновое изображение

Документ с несколькими фоновыми изображениями.

> Свойство background-image>

Объектная модель

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 .

Если фон задаётся для строки таблицы (тег ), то Chrome, Safari, iOS отображают его не так, как предписывает спецификация, а именно для каждой ячейки отдельно. В то время как браузер должен показывать цельный фон для всего ряда. В примере 2 приведён код демонстрирующий ошибку.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).

Рис. 1. Повторение фона для каждой ячейки

Рис. 2. Фон для всей строки