background
Podsumowanie
Własność background
jest skrótem do ustawiania poszczególnych wartości tła z jednego miejsca w arkuszu stylów. Właściwość background
może być stosowana do ustawiania wartości dla jednej lub więcej z wymienionych warstw własności: background-attachment
, background-color
, background-image
, background-position
, background-repeat
(en-US).
Wartość początkowa | as each of the properties of the shorthand:
|
---|---|
Stosowana do | wszystkich elementów. It also applies to ::first-letter and ::first-line (en-US). |
Dziedziczona | no |
Percentages | as each of the properties of the shorthand:
|
Wartość wyliczona | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Składnia
background: [ <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position>
] | inherit
(en-US) ;
Właściwość background jest deklarowana przez jedną lub więcej warstw tej właściwości, oddzielonych przecinkami.
Składnia każdej z warstw jest następująca:
- Każda warstwa może zawierać zero lub jedno wystąpienie którejś z następujących wartości:
- <attachment>
- <repeat-style>
- <bg-size>
- <position>
- <bg-image>
- Wartość <bg-size> może być wstawiona bezpośrednio po wartości <position>, oddzielonej znakiem '/', np. "
center/80%
". - Wartość <box> może być wstawiona zero, jeden lub dwa razy. Jeśli jest wstawiona raz - ustawia zarówno
background-origin
jak ibackground-clip
(en-US). Jeśli wystąpi dwa razy - pierwsze wystąpienie ustawiabackground-origin
, a drugiebackground-clip
(en-US). - Wartość <background-color> może być wstawiona jedynie w specyfikacji ostatniej warstwy.
Wartości
- background-color
- Zobacz
background-color
. - background-image
- Zobacz
background-image
. - background-repeat
- Zobacz
background-repeat
. - background-attachment
- Zobacz
background-attachment
. - background-position
- Zobacz
background-position
.
Przykłady
HTML
<p class="topbanner">
Starry sky<br/>
Twinkle twinkle<br/>
Starry sky
</p>
<p class="warning">Here is a paragraph<p>
CSS
.warning {
background: red;
}
.topbanner {
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
}
Result
Notatki
Biorąc pod uwagę sensowność deklaracji, własność background
najpierw ustawia poszczególne własności tła na ich domyślne wartości, potem przydziela jawnie wartości określone w deklaracji. Nie musisz definiować wartości dla każdej warstwy, wystarczy, że zadeklarujesz tylko te, które chcesz zmienić z wartości domyślnej.
Specyfikacje
Zgodność z przeglądarką
Przeglądarka | Najniższa wersja |
---|---|
Internet Explorer | 4 |
Firefox | 1 |
Netscape | 6 |
Opera | 3.5 |