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.

Wartość początkowaas each of the properties of the shorthand:
Stosowana dowszystkich elementów. It also applies to ::first-letter and ::first-line.
Dziedziczonano
Percentagesas 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: relative to the background positioning area
Mediavisual
Wartość wyliczonaas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Składnia

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

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