Background изображение. CSS Background. Полное руководство. Как сделать фон более привлекательным

22.05.2020

Краткая информация

Версии CSS

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Фон для TR

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

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

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

Краткая информация

Версии CSS

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

background-image

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

document.getElementById("elementID ").style.backgroundImage

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

HTML5 CSS2.1 IE Cr Op Sa Fx

Фон для TR

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

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

Думаю, нет ни одного сайта, где не использовалось бы свойство CSS background . Казалось бы, что может быть проще этого свойства? Но нет, его возможности гораздо шире обычного назначения картинки или цвета в качестве фона страницы. Что-то будет знакомым, а что-то наверняка для многих станет новинкой. В любом случае — досконально знать, как работает background будет полезно.

CSS3 привнес немало нового в свойство, это и прозрачность, и назначение нескольких изображений в качестве фона, но об этом мы поговорим ниже, а для начала рассмотрим основы свойства background .

background-color

Я более чем уверен — вы уже неоднократно делали назначение цвета фона. Сделать это можно используя несколько видов записи: обычную(используется название цвета), шестнадцатиричную или 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 (полностью непрозрачный).

background-image

Это свойство тоже используется очень часто, позволяет присваивать фону изображение. В CSS3 добавлена возможность присваивать фону несколько изображений, причем каждое создает своеобразный слой, поэтому каждое последующее накладывается на предыдущее. Зачем это может пригодиться? Все достаточно просто — допустим, нужно прикрутить рюшечки в каждом из углов сайта. При условии более-менее резиновой верстки использовать одно изображение — не вариант. Поэтому делаем 4 «слоя», каждое изображение двигаем в свой угол и на этом все, задача решена

Body {background-image: url("image1"), url("image2"), url("image3")}

Если нужно назначить одно изображение на фон — в коде оставляем только первое, думаю, это понятно.
Используя любые изображения в качестве фона следует помнить два правила:

задайте контрастный цвет фона на тот случай, если у пользователя по каким-то причинам не отобразится картинка. Он может банально отключить отображение картинок, экономит трафик.
не используйте фоновое изображение для передачи какой-либо важной информации. По причине указанной выше, пользователь может и не увидеть.

Поддержка нескольких изображений для фона достаточно широка. Все браузеры, даже IE8, поддерживают это свойство.

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

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

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

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