Цвет фона и характеристики изображения.
Сокращённое свойство, объединяющее:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-clip
- background-origin
- background-size
Возможные значения
Список вложенных значений характеристик фона. Возможные вложенные значения соответствуют тем же правилам, что и возможные значения для соответствующих вышеупомянутых свойств.
Список вложенных значений соответствует определённому формату:
[изображение] [позиция] / [размер] [повтор] [вложение] [происхождение] [клип] [цвет]
[image][position][size][repeat][attachment][origin][clip][color]
Полный пример:
url("bg.jpg") 20% 0% / contain repeat-y fixed content-box padding-box #fff
Не все значения обязательны:
Если включена только одна из частей background-clip или background-origin, это значение будет применяться как к характеристикам clip, так и к характеристикам origin.
Любые другие исключённые значения по умолчанию будут иметь исходное значение.
“/” используется только для разделения частей положения и размера. Если параметр background-size исключен, “/” не требуется.
Базовый пример:
url("bg.jpg") 20% 0% repeat-y fixed #fff
Минимальный пример:
url("bg.jpg") #fff
inherit,initial или unset также может использоваться самостоятельно.
background: url("bg.png") top right no-repeat #ccc
Несколько фонов
Можно применить несколько фонов, разделяя каждый список значений фона запятой. Первый фон будет применён сверху, “ближайший” к пользователю.
Последующие изображения будут применены под фоном, который находится перед ним.
Часть цвета фона должна применяться только к конечному указанному фону.
Пример:
url("upperImage.png") 0 0 no-repeat, url("lowerImage.png") right repeat-y #fff;
Пример
.shorthand1 { url("bg.jpg") 20% 0% / 99px 33px repeat-y fixed content-box padding-box #fff; } /* ...is the equivalent of... */ .longhand1 { background-image: url("bg.jpg"); background-position: 20% 0%; background-size: 99px 33px; background-repeat: repeat-y; background-attachment: fixed; background-origin: content-box; background-clip: padding-box; background-color: #fff; } .shorthand2 { background: fuchsia; } /* ...is the equivalent of... */ .longhand2 { background-color: fuchsia; background-image: initial; /* (none) */ background-position: initial; /* (0% 0%) */ background-size: initial; /* (auto) */ background-repeat: initial; /* (repeat) */ background-attachment: initial; /* (scroll) */ background-origin: initial; /* (padding-box) */ background-clip: initial; /* (border-box) */ }
Страницы в тему:
- Свойство CSS: background-image
- Свойство CSS: background-position
- Свойство CSS: background-size
- Свойство CSS: background-repeat
- Свойство CSS: background-attachment
- Свойство CSS: background-origin
- Свойство CSS: background-clip
- Свойство CSS: background-color
Все свойства CSS
all background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow caption-side clear clip color content counter-increment counter-reset cursor direction display empty-cells float font font-family font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity orphans outline outline-color outline-style outline-width overflow padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside position quotes right table-layout text-align text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-transform top transform transform-origin transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space widows width word-spacing z-index