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: `background-image`: `none` `background-position`: `0% 0%` background-size (en-US): `auto auto` background-repeat (en-US): `repeat` `background-origin`: `padding-box` background-clip (en-US): `border-box` `background-attachment`: `scroll` `background-color`: `transparent`
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: `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 (en-US): relative to the background positioning area
Wartość wyliczona	as each of the properties of the shorthand: `background-image`: as specified, but with url (en-US) values made absolute `background-position`: as each of the properties of the shorthand: background-position-x (en-US): 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 (en-US): A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword background-size (en-US): as specified, but with relative lengths converted into absolute lengths background-repeat (en-US): a list, each item consisting of two keywords, one per dimension `background-origin`: jako określone background-clip (en-US): jako określone `background-attachment`: jako określone `background-color`: computed color
Animation type	as each of the properties of the shorthand: `background-color`: a color `background-image`: discrete background-clip (en-US): discrete `background-position`: repeatable list of simple list of length, percentage, or calc background-size (en-US): repeatable list of simple list of length, percentage, or calc background-repeat (en-US): discrete `background-attachment`: discrete

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 i background-clip (en-US). Jeśli wystąpi dwa razy - pierwsze wystąpienie ustawia background-origin, a drugie background-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

Zobacz także

background, background-attachment, background-color, background-image, background-position, background-repeat (en-US)