background

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

Синтаксис

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

= [background-attachment || background-image || background-position || background-repeat] | inherit

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

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

Значения

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

XHTML 1.0 CSS2.1 IE Cr Op Sa Fx

        Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

HTML5 CSS3 IE Cr Op Sa Fx

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

[window.]document.getElementById(» elementID «).style.background

Браузеры

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

Источник

background

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Using a */ background: green; /* Using a and */ background: url("test.jpg") repeat-y; /* Using a and */ background: border-box red; /* A single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); /* Global values */ background: inherit; background: initial; background: revert; background: revert-layer; background: unset;

The background property is specified as one or more background layers, separated by commas.

Читайте также: Php print error array

The syntax of each layer is as follows:

Each layer may include zero or one occurrences of any of the following values:

The value may only be included immediately after , separated with the ‘/’ character, like this: » center/80% «.
The value may be included zero, one, or two times. If included once, it sets both background-origin and background-clip . If it is included twice, the first occurrence sets background-origin , and the second sets background-clip .
The value may only be included in the last layer specified.

Values

See background-clip and background-origin . Default: border-box and padding-box respectively.

See background-color . Default: transparent .

The following three lines of CSS are equivalent:

background: none; background: transparent; background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

Accessibility concerns

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page’s overall purpose, it is better to describe it semantically in the document.

Formal definition

background-image : none
background-position : 0% 0%
background-size : auto auto
background-repeat : repeat
background-origin : padding-box
background-clip : border-box
background-attachment : scroll
background-color : transparent

background-position : refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
background-size : relative to the background positioning area

background-image : as specified, but with url() values made absolute

background-position : as each of the properties of the shorthand:

background-position-x : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
background-position-y : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword

background-color : a color
background-image : discrete
background-clip : a repeatable list of
background-position : a repeatable list of
background-size : a repeatable list of
background-repeat : discrete
background-attachment : discrete

Formal syntax

background =
[ # , ]?

=
||
[ / ]? ||
||
||
||

=
||
||
[ / ]? ||
||
||
||

=
|
none

=
[ | auto ] |
cover |
contain

=
scroll |
fixed |
local

=
border-box |
padding-box |
content-box

=
|

=
url( * ) |
src( * )

Examples

Setting backgrounds with color keywords and images

HTML

p class="topbanner"> Starry skybr /> Twinkle twinklebr /> Starry sky p> p class="warning">Here is a paragraphp> p>p>

CSS

.warning  background: pink; > .topbanner  background: url("starsolid.gif") #99f repeat-y fixed; >

Result

Specifications

Browser compatibility

BCD tables only load in the browser

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Урок 8. Как установить цвет текста и фон элемента в CSS?

Одна из самых распространённых задач при редактировании текста и блоков в HTML и CSS. С ней может столкнуться не только верстальщик, но и любой контент-менеджер, который редактирует содержимое сайта. Для решения данного вопроса используется всего два свойства: color — цвет текста, background — работа с фоном, цвет или изображение.

Работа со цветом теста в CSS

color — это свойство, которое нужно для указания цвета только для текста. Цвет можно указать как в формате HTML HEX кода, так в формате RGB (Red Green Blue). Коды цвета можно выбрать либо в графических программах, например, Photoshop, либо в онлайн

Теперь применяем свойство:

a color: #0085сс; // ссылки приобретут светло-синий цвет 
>

Пример указания цвета для текста в элементе с идентификатором content:

.content color: #444; // тёмно-серый текст в элементе с классом content 
>

Почему именно такой пример: указание цвета для ссылки и для текста — это разные вещи. Запомните. Ну и от себя рекомендую делать цвет текста и ссылки разного цвета.

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

background — это свойство, которое позволяет работать с фоном изображения: устанавливать цвет фона, устанавливать в качестве фона изображение (форматы jpg, gif, png), изменять положение фона и другие параметры, которые описаны ниже.

background-color — это свойство используется только для установки цвета фона. Принимает только код цвета. Цвет можно указать в формате RGB (Red Green Blue), либо в формате HTML HEX кода.

.block background-color: #fbb5b5; // установим пастельный алый цвет для фона 
>

Лучшие примеры цветов для фона (современные дизайн-модели: Flat Design и др):

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

#back background-image: url("images/fon.jpg"); 
>

background-repeat — может использоваться только в том случае, когда выше было указано свойство background-image. Данное свойство устанавливает правило повтора изображения. По умолчанию, изображение повторяется по оси X и по оси Y до границ элемента (если фон меньше элемента). В свойстве можно указать настройку, чтобы изображения повторялось только по оси X — repeat-x (по горизонтали), только по Y — repeat-y (по вертикали) или вообще не повторялось вообще — no-repeat.

#content background-image: url("background.jpg"); 
background-repeat: repeat-x; /* изображение будет повторяться только по горизонтали до границ блока */ 
>

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

#content background-image: url("background.jpg"); 
background-repeat: repeat-x; /* изображение будет повторяться лишь по горизонтали */ 
background-attachment: fixed; /* закреплено в расположении */ 
>

background-position — свойство, которое задаёт расположение фона в элементе. Задаётся два значения: расположение по горизонтали и затем по вертикали. Задаётся либо в цифровом (пиксели и проценты), либо в буквенном варианте (left, center, right, top, bottom). Данное свойство нужно в том случае, когда изображение не повторяется (no-repeat), а фон нужно расположить в элементе определённым образом.

#block background-position: left center; /* по горизонтали - по левой стороне, по высоте - посередине */ 
>

В комментарии думаю всё понятно)
Пример написания цифирного значения:

#keys background-position: 109px 57px; /* отступ слева 109px, сверху 57px */ 
>

Тут думаю тоже всё должно быть понятно.
Много свойств? Смотрим как писать сокращённо.

В итоге. Сокращённая запись background в CSS

Можно использовать сокращённую запись, где все параметры будут указаны в строчку:

background: color image repeat attachment position;

Внимание! Порядок важен. Указывая значения, следите за последовательностью их расположения как в примере.

О плюсах. Подобная запись сокращает время загрузки страницы и рендеринг браузером. Пожалейте посетителей, записывайте лучше таким образом, если, конечно, Вам нужно несколько свойств.
Да, пропустить какое-либо свойство, в случае отсутствия потребности в нём, можно! Просто продолжаете дальше указывать значения дальше по списку.

.block background: #f1f1f1 url("background.jpg") repeat-x scroll 100px 125px; 
>

Пример работы фонов background в CSS

Код примера. Результат работы и исходники можете посмотреть по ссылке ниже.

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

Источник

background

background

Синтаксис

Значения

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

Браузеры

background

Try it

Constituent properties

Syntax

Values

Accessibility concerns

Formal definition

Formal syntax

Examples

Setting backgrounds with color keywords and images

HTML

CSS

Result

Specifications

Browser compatibility

See also

Found a content problem with this page?

MDN

Support

Our communities

Developers

Урок 8. Как установить цвет текста и фон элемента в CSS?

Работа со цветом теста в CSS

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

В итоге. Сокращённая запись background в CSS

Пример работы фонов background в CSS