MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

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:
  • background-image: as specified, but with URIs made absolute
  • background-position: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a length), otherwise as a percentage
  • background-size: as specified, but with relative lengths converted into absolute lengths
  • background-repeat: a list, each item consisting of two keywords, one per dimension
  • background-origin: jako określone
  • background-clip: jako określone
  • background-attachment: jako określone
  • background-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
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>
    • <bg-image>
    • <position>
    • <bg-size>
    • <repeat-style>
  • 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

background, background-attachment, background-color, background-image, background-position, background-repeat

Autorzy i etykiety dokumentu

Etykiety: 
 Autorzy tej strony: LuciusLuWroc, teoli, SphinxKnight, Yuichiro, Witia, Mgjbot, Kjj2, Ptak82
 Ostatnia aktualizacja: LuciusLuWroc,