Style background

При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

Работа с фоном в CSS

С помощью свойства background можно задать положение, цвет, изображение, повторяемость и привязку фона, как для отдельных элементов, так и полностью для всего сайта, что по своей сути, кстати, является заданием определённых настроек для тега <body>. Рассмотрим все свойства, которые связаны с заданием фона.

background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам <h1>, <p>, так и ко всему веб-сайту с помощью тега <body>.

Например:

background-image

Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

Например:

Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

background-repeat

Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.

Оно может иметь несколько значений:

background-repeat: repeat-x — повторение по горизонтали;
background-repeat: repeat-y — повторение по вертикали;
background-repeat: repeat — повторение и по горизонтали и по вертикали;
background-repeat: no-repeat — изображение не повторяется.

Например, повторение по горизонтали выглядит так:

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

background-attachment: scroll — фон прокручивается вместе со страницей;
background-attachment: fixed — фон остаётся неподвижным.

background-position

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

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left.

Например:

background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

gradient

Плавный переход от одного цвета к другому, причем переходов допускается несколько.

Использование градиента можно наглядно продемонстрировать в примере кода:

Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

Например:

Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.

Работа с размером фона в CSS

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Абсолютное изменение размера

Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.

Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

Относительное изменение размера

Если применять проценты, размер будет основываться не на изображении, а на элементе.

Например:

То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.

Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

Масштабирование до максимального размера

В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.

Такой фон страницы будет автоматически подгоняться под любое разрешение:

Заполнение фоном

Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

В том случае, если соотношения сторон различаются, картинка обрежется:

Масштабирование сразу нескольких фонов

Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:

Создание полупрозрачного фона в CSS

Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

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

Пример создания полупрозрачного блока:

Однако достаточно часто полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным для читабельности.

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

www.internet-technologies.ru

Background-color

Задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>:

Background-image

Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

Обратите внимание как указан путь к изображению — это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать полный путь к изображению. Опция пригодится если вы захотите, например, добавить кликабельный фон на сайте.

Background-size

Определяет размер фонового изображения.

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

Background-repeat

Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

background-repeat: repeat-x — изображение повторяется только по горизонтали
background-repeat: repeat-y — изображение повторяется только по вертикали
background-repeat: repeat — изображение повторяется по горизонтали и вертикали
background-repeat: no-repeat — изображение не повторяется

background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

background-attachment: scroll — прокручивается вместе со страницей
background-attachment: fixed — при прокрутке фон остается неподвижным

Background-position

Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

в фиксированных единицах (пикселы, сантиметры)
в процентах
словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).

Рассмотрим примеры:

background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
background-position: right bottom — рисунок располагается снизу справа.

Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Например:

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!

design-mania.ru

Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье продолжим рассматривать свойства CSS. На этот раз займемся настройками фона как для всей web-страницы, так и для отдельных элементов. Для этого используются пять CSS правил: background-position, background-image, background-repeat, background-color, background-attachment, — либо одно составное правило background. С помощью хорошо подобранного фона можно выделить важные элементы и оживить html страницу.

Если же вы впервые слышите о каскадных таблицах стилей, то предлагаю вам для начала ознакомиться со статьей о том, что такое css и как их подключить к html документу.

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

background-color — задает цвет фона для любого Html элемента;
background-image — с помощью этого атрибута в качестве фона можно использовать картинку;
background-repeat — параметр повторения фоновой картинки;
background-position — позволяет указать позицию фонового изображения относительно элемента web страницы;
background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента веб страницы.

Далее рассмотрим подробнее каждое свойство.

Background-color и background-image

Background-color и background-image два свойства, которые влияют непосредственно на то каким будет фон элемента html страницы, либо фон всей страницы.

Свойство стиля background-color служит для задания цвета фона и имеет следующий синтаксис:

background-color: transparent|<цвет>|inherit

Значение transparent делает фон прозрачным. Вообще по умолчанию цвет фона в любом элементе веб страницы прозрачный. Цвет можно задать в виде RGB-кода или имени. RGB-код задается в виде шести или трех цифр шестнадцатеричного кода. Значение inherit означает, что элемент наследует настройки фона от родительского элемента.

Например, зададим для абзаца черный цвет фона и белый текст. Так это будет выглядеть в коде html страницы:

<p style=»background-color:#000000; color:#ffffff»>У этого абзаца черный фон и белый текст</p>

Либо так в коде CSS файла:

p{
background-color:#000000;
color:#ffffff
}

И результат:

У этого абзаца черный фон и белый текст

Остальные четыре параметра касаются только фонового изображения, которое можно задать для любого элемента web-страницы. Какой графический файл использовать в качестве фоновой картинки задает свойство стиля background-image:

background-image: none|url (<интернет-адрес файла изображения>)

По умолчанию background-image имеет значение none, то есть никакого изображения для фона не используется. В случае если все таки в качестве фона необходимо использовать картинку, то необходимо указать адрес файла заключить его в скобки и перед всей этой записью поставить url:

<p style=»background-image: url (http://webcodius.ru/example/fonp.jpg)»>Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.</p>

И результат:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

А вот оригинальный вид фонового изображения:

Вообще графический фон выводится поверх обычного фона, заданного с помощью свойства background-color. Но если фоновая картинка будет содержать прозрачные области, то цветной фон будет просвечивать сквозь них. Прозрачные фрагменты поддерживают форматы GIF и PNG.

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

Background-repeat — параметры повторения фонового изображения

Свойство background-repeat может принимать следующие значения:

background-repeat:no-repeat|repeat|repeat-x|repeat-y

no-repeat — фоновое изображение не будет повторяться. В этом случае часть фона элемента останется не заполненным им. Предыдущий пример, но уже со свойством background-repeat:no-repeat:

<p style=»background-image: url (http://webcodius.ru/example/fonp.jpg); background-repeat:no-repeat;»>Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.</p>

В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

repeat — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.

repeat-x — фоновое изображение будет повторяться только по горизонтали. Пример:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-x. Поэтому фоновая картинка заполнила только верхнюю часть абзаца.

repeat-y — фоновое изображение будет повторяться только по вертикали. Пример:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-y. Поэтому фоновая картинка заполнила только левую часть абзаца.

Позиционирование фона с помощью background-position

Позицию фонового изображения относительно элемента web страницы для которого оно назначено можно указать с помощью свойства background-position:

background-position: <горизонтальная позиция> [<вертикальная позиция>]

Горизонтальная позиция может принимать следующие значения:

<числовое значение>|left|center|right

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

left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
center — фоновое изображение располагается по центру элемента;
right — фон прижимается к правому краю элемента.

Вертикальная позиция может иметь следующие значения:

<числовое значение>|top|center|bottom

Числовое значение указывает местоположение фонового изображения по вертикали и задается абсолютными или относительными единицами измерения.

top — фоновая картинка прижимается к верхнему краю элемента (значение по умолчанию);
center — фоновое изображение располагается по центру;
bottom — фон прижимается к нижнему краю.

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

Например, для смещения фонового изображения для этого абзаца на 250 пикселей по горизонтали и на 10 пикселей по вертикали я использовал следующие CSS правила:

background-image:url (http://webcodius.ru/example/logo.png);
background-repeat:no-repeat;
background-position:250px 10px;

Если для свойства background-position указана только одна позиция, то вторая будет будет приниматься равной center в случае использования ключевых слов и 50% в случае использования числовых значений.

То есть если, например, необходимо выровнять фоновое изображение по центру правого края элемента web страницы, то достаточно указать следующее css правило:

background-repeat:no-repeat;
background-position:100%;

или

background-repeat:no-repeat;
background-position:right;

Вообще соотношение между ключевыми словами и процентной записью следующее:

top left = left top = 0% 0% (выравнивание по левому верхнему углу)
top = top center = center top = 50% 0% (вверху по центру)
right top = top right = 100% 0% (по правому верхнему углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (по левому нижнему углу)
bottom = bottom center = center bottom = 50% 100% (внизу по центру)
bottom right = right bottom = 100% 100% (по правому нижнему углу)

На практике я советую использовать цифровые значения (будь это абсолютные или относительные величины), потому что первая цифра это всегда позиция по X, а вторая по Y. А ключевые слова хоть и кажутся более понятными, но могут стоять в различной последовательности и это может ввести в заблуждение.

Фиксация фона background-attachment

По умолчанию при прокрутке web страницы в окне браузера, вместе с ее содержимым прокручивается, если есть, и фоновое изображение. Свойство background-attachment позволяет влиять на поведение фонового рисунка. Этот атрибут позволяет зафиксировать фон и запретить его прокрутку. Background-attachment может принимать следующие значения:

background-attachment: scroll|fixed;

scroll — значение по умолчанию, которое заставляет браузер прокручивать фон вместе с содержимым страницы. Значение fixed фиксирует фон на месте, и он не будет прокручиваться.

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

Сборное правило background

Все пять рассмотренных выше правил могут быть объединены в одно сборное правило background. Значения этих пяти правил могут использоваться в любом порядке, так как они уникальны, и разделяются пробелами. А все, что вы не укажите браузер возьмет значения по умолчанию.

Например, для текущего абзаца я установил фоновое изображение в виде облака, сделал его не повторяющимся и указал расположение по центру элемента. Для этого я использовал следующее CSS правило:

background: url (http://webcodius.ru/example/logo.png) 50% no-repeat;

А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:

background-color: #cccccc;

или просто

background: #cccccc;

Больше рассказывать о настройка фона с помощью правил CSS нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!

webcodius.ru

Фиксация фонового изображения

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

<!DOCTYPE html> <html> <head> 	<title>Фоновые изображения в CSS</title> </head> <body style="background-image: url('/css/images/css.png')">  <p style="height:2500px">Пример текста.</p>  </body> </html>

Фоновое изображение можно зафиксировать. Для этого в CSS применяется свойство background-attachment. По умолчанию его значение равно scroll (прокрутка или подвижный фон).

То есть прошлый пример полностью аналогичен следующему:

<!DOCTYPE html> <html> <head> 	<title>Фоновые изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-attachment: scroll; 	} </style> </head> <body>  <p style="height:2500px">Пример текста.</p>  </body> </html>

Чтобы зафиксировать фоновое изображение свойству background-attachment нужно назначить значение fixed. Исправим предыдущий пример и посмотрим как он будет работать:

<!DOCTYPE html> <html> <head> 	<title>Фиксация фонового изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-attachment: fixed; 	} </style> </head> <body>  <p style="height:2500px">Пример текста.</p>  </body> </html>

Значения scroll и fixed для свойства background-attachment были в версии CSS2.1. В спецификации CSS3 появилось дополнительное значение для этого свойтва — local.

При использовании свойтва local, а применять его имеет смысл к блокам в документе, фоновое изображение блока будет прокручиваться, если блок имеет полосу прокрутки и пользователь прокручивает её. Тогда содержимое блока и фоновое изображение прокручиваются в блоке. При прокрутке страницы, а не блока, фоновое изображение блока прокручивается вместе с внеблоковым содержимым документа. Это проще один раз увидеть, чтобы понять. Вот пример:

<!DOCTYPE html> <html> <head> 	<title>Фоновые изображения в CSS</title> <style> 	body 	{	/* создаём правило для тега body - тут укажем фоновый рисунок для всего документа */ 		background-image: url('/css/images/bkg.gif'); 	} 	div 	{ 		width: 400px; 		height: 300px; 		background-image: url('/css/images/css.png'); 		overflow: auto; /* при выхождении содержимого за границу блока появляется полоса прокрутки */ 	} </style> </head> <body>  <p>Первый блок со своим фоновым изображением.</p>  <div style="background-attachment: scroll;">Эта область - тег div. Фоновое изображение задано в стиле, прописанном в разделе head. Ширина блока равна 400 пикселям, фоновое изображение блока прокручивается вместе с телом документа. <p style="height:2500px">Пример текста.</p></div>  <p>Второй блок со своим фоновым изображением.</p>  <div style="background-attachment: fixed;">Эта область - тег div. Фоновое изображение задано в стиле, прописанном в разделе head. Ширина блока равна 400 пикселям, фоновое изображение остаётся на месте при прокрутке документа. <p style="height:2500px">Пример текста.</p></div>  <p>Третий блок со своим фоновым изображением.</p>  <div style="background-attachment: local;">Эта область - тег div. Фоновое изображение задано в стиле, прописанном в разделе head. Ширина блока равна 400 пикселям, фоновое изображение блока прокручивается вместе с телом документа. Но также при прокрутке блока прокручивается вместе с другим содержимым блока. <p style="height:2500px">Пример текста.</p></div>  <p style="height:2500px">Пример текста.</p>  </body> </html>

На этом тема фиксации фоновых изображений в рамках этой статьи закрыта.

Повторение фонового изображения

Выше в статье писалось, фоновый рисунок повторяется «плиткой», если не занимает всей площади блока. Управлять вариантами повторений фонового изображения можно при помощи свойства background-repeat. Возможные значения этого свойства:

repeat — фоновый рисунок повторяется «плиткой» (значение по умолчанию).
no-repeat — фоновый рисунок не повторяется, показывается только один раз.
repeat-x — повторять изображение только по горизонтали.
repeat-y — повторять изображение только по вертикали.

<!DOCTYPE html> <html>  <head> 	<title>Повторение фонового изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-repeat: no-repeat; 	} </style> </head> <body>  <p style="height:2500px">Пример текста.</p>  </body> </html>

Теперь тот же самый пример, только повторим изображение по вертикали.

<!DOCTYPE html> <html>  <head> 	<title>Повторение фонового изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-repeat: repeat-y; 	} </style> </head> <body>  <p style="height:2500px">Пример текста.</p>  </body> </html>

Позиционирование фонового изображения

Изменить начально положение фонового изображения, заданного свойством background-image, можно при помощи свойства background-position. Если быть точным, задаётся позиция верхнего левого угла изображения.

Для позиционирования можно использовать следующие ключевые слова:

Позиционирование по горизонтали:

left — расположить слева.
center — расположить по центру.
right — расположить справа.

Позиционирование по вертикали:

top — расположить сверху.
center — расположить по центру.
bottom — расположить снизу.

<!DOCTYPE html> <html>  <head> 	<title>Позиционирование фонового изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-repeat: no-repeat; 		background-position: right top; 	} </style> </head> <body>  <p>Позиционирование фонового изображения в правом верхнем углу.</p>  </body> </html>

Кроме ключевых слов можно использовать единицы измерения CSS такие как пикселы, проценты и прочие.

<!DOCTYPE html> <html>  <head> 	<title>Позиционирование фонового изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-repeat: no-repeat; 		background-position: center 150px; 	} </style> </head> <body>  <p>Позиционирование фонового изображения по центру с отступом от верхней границы в 150 пикселей.</p>  </body> </html>

Свойство background

Свойство background является базовым и используя его можно задать значение всех дочерних свойств, описаных выше.

background-color — работа с этим свойством подробно описана в статье «Цвета в CSS»
background-attachment
background-image
background-position
background-repeat

При использовании свойства background параметры задаются через пробел в любом порядке, только параметры позиционирования при совпадии значений устанавливаются сначала для горизонтали, потом для вертикали.

<!DOCTYPE html> <html>  <head> 	<title>Позиционирование фонового изображения в CSS</title> <style> 	body 	{ 		background: url('/css/images/css.png') no-repeat center 150px; 	} </style> </head> <body>  <p>Позиционирование фонового изображения по центру с отступом от верхней границы в 150 пикселей.</p> <p style="background: blue">Этот абзац с синим фоновым цветом заданным в свойстве background, аналогичная запись для стиля: background-color: blue.</p>  </body> </html>

Полезные советы

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

komotoz.ru

What exactly is a background?

The background of an element is the area that sits underneath an element’s content, padding, and border. By default this is the case anyway — in newer browsers you can alter the area the background takes up, using the background-clip property (see the CSS box model article background-clip coverage for more details.)

The background doesn’t sit underneath the margin — the margin doesn’t count as part of the element’s area, but rather the area outside the element.

There are many other different properties you can use to manipulate the element’s background, some of which we have already seen a number of times in our course already:

background-color: Sets a solid color for the background.
background-image: Specifies a background image to appear in the background of the element. This can be a static file, or a generated gradient.
background-position: Specifies the position that the background should appear inside the element background.
background-repeat: Specifies whether the background should be repeated (tiled) or not.
background-attachment: Specifies the behaviour of an element’s background when its content scrolls, e.g. does it scroll with the content, or is it fixed?
background: Shorthand for specifying the above five properties on one line.
background-size: Allows a background image to be resized dynamically

Throughout the rest of the article, we’ll look at how to use these features in detail.

The basics: color, image, position, repeat

Let’s explore a simple example to show how the four most basic properties work — you’ll use these ones all the time when dealing with backgrounds.

Background color

You’ll use the background-color property very often:

For a start, the default background color of most elements is not white (as you might expect) but transparent — therefore if you set an element’s background color to something interesting, but want its child elements to be white, you’ll have to set that explicitly.
In addition, it is important to set a background color as a fallback. Background colors are supported pretty much everywhere, whereas more exotic features such as background gradients are supported only in newer browsers, plus a background image might fail to load for some reason. It is therefore a good idea to set a basic background color as well as specifying such features, so the element’s content is readable no matter what.

Let’s start by building up an example. We’ll begin with some simple HTML:

<p>Exciting box!</p>

Let’s give it a background color:

p {  font-family: sans-serif;  padding: 20px;  /* background properties */  background-color: yellow; }

The result is as follows:

Background image

The background-image property specifies a background image to display in the background of an element. The simplest usage of this property involves using the url() function — which takes the path to an image as a parameter — to fetch a static image file to insert. Let’s add a background image to the above example:

p {  font-family: sans-serif;  padding: 20px;  /* background properties */  background-color: yellow;  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png); }

The result is as follows:

This doesn’t look great at the moment — images are repeated horizontally and vertically by default. We can fix this using background-repeat, which we’ll look at next.

One important thing to bear in mind is that since background images are set using CSS and appear in the background of content, they will be invisible to assistive technologies like screen readers. They are not content images — they are just for decoration — if you want to include an image on your page that is part of the content, then you should do so with an <img> element.

Background repeat

background-repeat allows you to specify how the background image is repeated. The default value is repeat which, as you saw above, makes the image keep repeating until the whole element background is filled. This isn’t what we want in this case (although it might be in some cases, e.g. repeating-background.html). Other common and widely supported values are:

no-repeat: The image will not repeat at all: it will only be shown once.
repeat-x: The image will repeat horizontally all the way across the background.
repeat-y: The image will repeat vertically all the way down the background.
repeat: The image will repeat both vertically and horizontally.

Let’s fix our example:

p {  font-family: sans-serif;  padding: 20px;  /* background properties */  background-color: yellow;  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);  background-repeat: no-repeat; }

The result is as follows:

This is certainly looking better, but the positioning of the image is off — it is currently overlapping the text. We need to position it in a better place.

Background position

background-position allows you to position your background image wherever you want inside the background. Generally the property will take two values separated by a space, which specify the horizontal (x) and vertical (y) coordinates of the image. The top left corner of the image is the origin — (0,0). Think of the background as a graph, with the x coordinate going across from left to right, and the y coordinate going from top to bottom.

The property can accept many different value types; the most common ones you’ll use are:

Absolute values like pixels — for example background-position: 200px 25px.
Relative values like rems — for example background-position: 20rem 2.5rem.
Percentages — for example background-position: 90% 25%.
Keywords — for example background-position: right center. These two values are intuitive, and can take values of left, center, right, and top, center, bottom, respectively.

You should note that you can mix and match these values, for example background-position: 99% center. Also note that if you only specify one value, that value will be assumed to be the horizontal value, and the vertical value will default to center.

Let’s fix up our example:

p {  font-family: sans-serif;  padding: 20px;  /* background properties */  background-color: yellow;  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);  background-repeat: no-repeat;  background-position: 99% center; }

The result is as follows:

Background image: gradients

There are another set of available values for background-image — color gradients, which are smooth color transitions across a background. Dynamically generated gradients were introduced as a feature a little while ago, because the use of gradients in web design was so popular, but implementing gradients using background images is rather inflexible. There are two types of gradient available at the moment — linear gradients (that go from one line straight across to another) and radial gradients (which radiate out from a single point).

In this article we’ll only focus on the first type. The second one is a bit more complex, and less commonly used. You can find more information about both in the links at the end of the article.

A linear gradient is created by passing in a linear-gradient() function as the value of a background-image property. At a minimum, the function needs to take three parameters separated by commas — the direction the gradient should be going in across the background, the color at the beginning, and the color at the end. For example:

background-image: linear-gradient(to bottom, orange, yellow);

This gradient would run from top to bottom, starting as orange at the top, and transitioning smoothly to yellow at the bottom. You can use keywords to specify the direction (to bottom, to right, to bottom right, etc.), or degree values (0deg is equivalent to top, 90deg is equivalent to to right, up to 360deg, which would be equivalent to to top again).

You can also specify other points along the gradient where the color is defined — these are called color stops, and the browser will work out the color gradients between each set of color stops. So for example:

background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);

This gradient would run from top to bottom, starting at yellow, gradiating to orange 40% of the way down the element, then back to yellow at 100%. You can specify as many color stops as you like, and you can also specify the position of those stops using other units, such as rems, px, etc.

Let’s add a linear gradient to our example:

p {  font-family: sans-serif;  padding: 20px;  /* background properties */  background-color: yellow;  background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange); }

The result is as follows:

Note that you can also set a repeating linear gradient using the repeating-linear-gradient() function. This works in exactly the same way, except that the pattern you set is repeated over and over again until the edge of the background. For example:

background-image: repeating-linear-gradient(to right, yellow, orange 25px, yellow 50px);

This would create a gradient that gradiates from yellow to orange and back again every 50 pixels along the gradient.

Background attachment

Another option we have available for backgrounds is specifying how they scroll when the content scrolls. This is controlled using the background-attachment property, which can take the following values:

scroll: Causes the element’s background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls.
fixed: Causes an element’s background to be fixed to the viewport, so that it doesn’t scroll when the page or element content is scrolled. It will always remain in the same position on the screen.
local: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the scroll value is rather confusing and doesn’t really do what you want in many cases. The local value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.

The background-attachment property only has an effect when there is content to scroll, so we’ve made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here).

Background shorthand

It is possible to declare all of the property values discussed above (and some others, in newer browsers) in a single line, using the background property. To do this, you use the same values as you did in the individual properties, but you put them all on one line separated by spaces, like so:

background: yellow linear-gradient(to bottom, orange, yellow) no-repeat left center scroll;

Any properties not specified in the shorthand will be assigned default values. You can check out the background reference page to find out what those defaults are, and what other properties can be included in the background shorthand.

Let’s go back to our exciting box example, and replace the existing properties with shorthand. We can replace all of these properties:

background-color: yellow; background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange); background-repeat: no-repeat; background-position: 99% center;

With this:

background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;

The final code looks like so:

p {  font-family: sans-serif;  padding: 20px;  /* background properties */  background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center; }

The result is as follows:

Multiple backgrounds

Fairly recently (since Internet Explorer 9) we’ve had the ability to attach multiple backgrounds to a single element. This is a good thing, as multiple backgrounds are very useful. You separate your different background definitions with commas:

background: url(image.png) no-repeat 99% center,  url(background-tile.png),  linear-gradient(to bottom, yellow, #dddd00 50%, orange); background-color: yellow;

And the backgrounds are stacked on top of one another with the first appearing at the top, then the second below it, then the third, etc. This is possibly not what you were expecting, so take care. Also note that we’ve put the fallback background color into a separate property declaration, because trying to include it in the multiple backgrounds seems to break things.

You can also put multiple values into longhand background-* properties, for example:

background-image: url(image.png), url(background-tile.png); background-repeat: no-repeat, repeat;

Although you are probably better off using background shorthand — not only is it quicker to write, but it is easier to see which background properties apply to which background.

Previous to multiple backgrounds being available, web developers had to put multiple <div> elements around their boxes and then apply a separate background image to each:

<div class="background1">  <div class="background2">  <div class="background3">  <p>My content</p>  </div>  </div> </div>

This worked, but it resulted in pretty messy hard-to-read markup. You might still have to do this if you need to support old versions of Internet Explorer.

Let’s put multiple backgrounds onto our exciting box example — we want to see the gradient and the fireball, both at the same time:

p {  font-family: sans-serif;  padding: 20px;  /* background properties */  background-color: yellow;   background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png) no-repeat 99% center,               linear-gradient(to bottom, yellow, #dddd00 50%, orange); }

This gives us the following result:

Background size

As we mentioned earlier, there is a property available — background-size — which allows you to dynamically alter the size of a background image so that it fits better into your design. This is very useful in many ways, for example automatically correcting the size of icons that aren’t uploaded correctly. Just bear in mind that this isn’t supported by Internet Explorer versions lower than 9, so you can’t rely on it if you need to support older browsers. For each background-image, you need to include two background size values — one for the horizontal dimension, and one for the vertical:

background-image: url(myimage.png); background-size: 16px 16px;

You can use all the length units you’d expect, to be able to specify the values you want — px, percentages, rems, etc.

You can see a good example of background-size in use in Including icons on links.

Active learning: Playing with backgrounds

This active learning session also has no right answers — here we want you to play with backgrounds and have some fun before you move on. You could:

Set a different background color.
Include a different background image — find an absolute path to an image to use inside the url() function.
Apply a background gradient.
Apply multiple backgrounds.
Include a background-size property to alter the size of your background images.

If you are following this as part of a class or study group, your teacher or mentor might also set some additional tasks for you to complete.

If you make a mistake, you can always reset it using the Reset button.

Summary

This article should have taught you most of what you’ll ever need to know about styling element backgrounds. Hopefully you’ll have had some fun along the way too! In the next article we’ll play with borders, and look at how to style those.

Работа с фоном в CSS

background-color

background-image

background-repeat

background-attachment

background-position

gradient

Работа с размером фона в CSS

Абсолютное изменение размера

Относительное изменение размера

Масштабирование до максимального размера

Заполнение фоном

Масштабирование сразу нескольких фонов

Создание полупрозрачного фона в CSS

Background-color

Background-image

Background-size

Background-repeat

Background-position

Background-color и background-image

Background-repeat — параметры повторения фонового изображения

Позиционирование фона с помощью background-position

Фиксация фона background-attachment

Сборное правило background

Фиксация фонового изображения

Повторение фонового изображения

Позиционирование фонового изображения

Свойство background

Полезные советы

What exactly is a background?

The basics: color, image, position, repeat

Background color

Background image

Background repeat

Background position

Background image: gradients

Background attachment

Background shorthand

Multiple backgrounds

Background size

Active learning: Playing with backgrounds

Summary

See also

Chrome

Firefox

Safari

Атрибуты для изменения параметров фона

Как изменить цвет фона в HTML

Как установить фоновую картинку

Положение фона

Как использовать ключевые слова для расположения фона

Повторение фона

Атрибут для полосы прокрутки

Как коротко записать свойства background

Свойство background-size

Свойство background-origin

Варианты использования фонового изображения

Шрифты вместо фона в HTML: background font

Новое свойство — background-break

Лучшие статьи читаем:

You May Also Like

Фон для веб страницы

Css свечение

About the Author: admind

Добавить комментарий Отменить ответ