- CSS-свойство background
- Синтаксис
- Значения и примеры использования
- Background-color
- Background-image
- Background-repeat
- Background-position
- Background-size
- Background-attachment
- Нюансы
- Материалы по теме
- background-color
- Try it
- Syntax
- Values
- Accessibility concerns
- Formal definition
- Formal syntax
- Examples
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- background-color
- Синтаксис
- Значения
- Объектная модель
- Браузеры
CSS-свойство background
Свойство background позволяет установить фоновое изображение, цвет фона и другие свойства стиля для заданного элемента.
background также объединяет в себе несколько других свойств:
- background-color — задаёт цвет фона элемента;
- background-image — устанавливает фоновое изображение для элемента;
- background-position — определяет начальную позицию фонового изображения;
- background-repeat — указывает, должно ли фоновое изображение повторяться;
- background-size — устанавливает размер фонового изображения;
- background-attachment — определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента.
👉 Свойство поддерживается современными браузерами. Актуальная информация — на caniuse.com.
Синтаксис
Значения и примеры использования
Background-color
Свойство background-color задаёт цвет фона элемента. Значение задаётся в виде hex-кодов, RGB-функций или названий цветов:
background-color: #FFA500; /* Устанавливает оранжевый цвет фона с помощью hex-кода */ background-color: rgb(255, 0, 0); /* Устанавливает красный цвет фона с помощью RGB-значения */ background-color: rgba(255, 0, 0, 0.5); /* Устанавливает полупрозрачный красный фон с помощью RGBA- значения */ background-color: white; /* Устанавливает цвет фона с помощью ключевого слова */ background-color: transparent; /* Устанавливает прозрачный фон элемента */ background-color: inherit; /* Наследует значение цвета фона от родительского элемента */
Background-image
Свойство background-image позволяет задать изображение в качестве фона элемента. Это может быть любой тип изображения, включая jpeg, png, gif, svg и другие. Значение этого свойства указывается в формате URL, который ссылается на изображение.
Также есть возможность использовать несколько изображений для фона. Для этого нужно указать несколько значений url() через запятую. При этом каждое изображение будет располагаться друг над другом, начиная с первого указанного значения.
Background-repeat
Свойство background-repeat определяет, как фоновое изображение будет повторяться внутри элемента, когда оно меньше размера элемента.
background-repeat может принимать следующие значения:
- repeat — изображение будет повторяться как по горизонтали, так и по вертикали (это значение является значением по умолчанию).
- repeat-x — изображение повторяется только по горизонтали.
- repeat-y — изображение повторяется только по вертикали.
- no-repeat — изображение будет отображаться только один раз.
Background-position
Свойство background-position устанавливает позицию фона. Задаётся в процентах или пикселях относительно верхнего левого угла элемента. Чтобы выровнять центральную часть фонового изображения по центру элемента, можно использовать значение 50% 50% , где первое значение указывает позицию по горизонтали, а второе по вертикали.
Background-size
Свойство background-size позволяет установить размеры фонового изображения. Значение может быть указано в пикселях, процентах, которые рассчитываются от размера элемента, или любых других доступных для CSS единицах измерения. Также можно указать ключевое слово:
- auto — значение по умолчанию и оно указывает на то, что размер фонового изображения должен быть равен его исходному размеру.
- cover — фоновое изображение будет растянуто по всей ширине и высоте элемента, что приведет к обрезанию изображения, если его размеры не соответствуют размерам элемента. При этом гарантируется, что весь элемент будет полностью заполнен изображением.
- contain — фоновое изображение будет изменено пропорционально, чтобы подходить размеру элемента, что гарантирует, что вся картинка будет видна в элементе. Однако возможно оставление пустых областей с двух сторон элемента.
Background-attachment
Свойство background-attachment указывает, будет ли фон элемента прокручиваться вместе с содержимым страницы или останется на месте.
- scroll — фоновое изображение прокручивается вместе с элементом, как обычный фон.
- fixed — фоновое изображение остается на месте, когда элемент прокручивается.
- local — фоновое изображение фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон, выходящий за рамки элемента, остаётся на месте.
Нюансы
- Если одновременно установлены background-color и background-image , то background-image будет отображаться поверх цвета фона.
- Если установлен background-attachment: fixed , то позиционирование фона осуществляется относительно окна браузера, а не относительно элемента, на который установлен фон.
- Если значение background-size указано в процентах, то размер изображения будет задаваться относительно размера элемента.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
background-color
The background-color CSS property sets the background color of an element.
Try it
Syntax
/* Keyword values */ background-color: red; background-color: indigo; /* Hexadecimal value */ background-color: #bbff00; /* Fully opaque */ background-color: #bf0; /* Fully opaque shorthand */ background-color: #11ffee00; /* Fully transparent */ background-color: #1fe0; /* Fully transparent shorthand */ background-color: #11ffeeff; /* Fully opaque */ background-color: #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color: rgb(255 255 128); /* Fully opaque */ background-color: rgb(117 190 218 / 0.5); /* 50% transparent */ /* HSL value */ background-color: hsl(50 33% 25%); /* Fully opaque */ background-color: hsl(50 33% 25% / 0.75); /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: revert; background-color: revert-layer; background-color: unset;
The background-color property is specified as a single value.
Values
The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image.
Accessibility concerns
It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.
Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.
Formal definition
Formal syntax
Examples
HTML
div class="exampleone">Lorem ipsum dolor sit amet, consectetuerdiv> div class="exampletwo">Lorem ipsum dolor sit amet, consectetuerdiv> div class="examplethree">Lorem ipsum dolor sit amet, consectetuerdiv>
CSS
.exampleone background-color: transparent; > .exampletwo background-color: rgb(153, 102, 153); color: rgb(255, 255, 204); > .examplethree background-color: #777799; color: #ffffff; >
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 18, 2023 by MDN contributors.
Your blueprint for a better internet.
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.
background-color
Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.
Синтаксис
background-color: | transparent | inherit
Значения
transparent Устанавливает прозрачный фон. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
В данном примере для элементов веб-страницы применяется три различных способа задания фонового цвета. Результат примера показан на рис. 1.
Рис. 1. Применение background-color
Объектная модель
[window.]document.getElementById(» elementID «).style.backgroundColorБраузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .