background

Czytasz angielską wersję tego artykułu, ponieważ nie ma jeszcze tłumaczenia dla tego języka. Pomóż nam przetłumaczyć ten artykuł!

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ątkowa	as each of the properties of the shorthand: `background-image`: `none` `background-position`: `0% 0%` `background-size`: `auto auto` `background-repeat`: `repeat` `background-origin`: `padding-box` `background-clip`: `border-box` `background-attachment`: `scroll` `background-color`: `transparent`
Stosowana do	wszystkich elementów. It also applies to `::first-letter` and `::first-line`.
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`: relative to the background positioning area
Media	visual
Wartość wyliczona	as each of the properties of the shorthand: `background-image`: as specified, but with `url` values 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`: computed color
Animation type	as each of the properties of the shorthand: `background-color`: a color `background-image`: discrete `background-clip`: discrete `background-position`: repeatable list of simple list of length, percentage, or calc `background-size`: repeatable list of simple list of length, percentage, or calc `background-repeat`: discrete `background-attachment`: discrete
Canonical order	order 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

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

Ostatnia modyfikacja: Mar 23, 2019, autorzy MDN