Własność CSS background

Własność CSS background to własność zbiorcza umożliwiająca ustawienie wszystkich własności tła, koloru, obrazu, sposobu powielania, rozmiaru itd. za pomocą jednej deklaracji.

Własność ta obejmuje następujące własności indywidualne:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

Przykład

Poniższa deklaracja własności background ustawia wszystkie dostępne własności tła elementu.

background: url("obraz.png") center / 120px 120px no-repeat scroll border-box content-box lightyellow;

Ta deklaracja definiuje następujące ustawienia:

• background-image: obraz.png
• background-position: center
• background-size: 120px 120px
• background-repeat: no-repeat
• background-attachment: scroll
• background-origin: border-box
• background-clip: content-box
• background-color: lightyellow

Przykładowy efekt:

Wartości i składnia

Własność background przyjmuje grupy maksymalnie ośmiu wartości rozdzielane przecinkami. Każda grupa obejmuje ustawienia jednej warstwy tła. Ostatnia (i tylko ostatnia) grupa powinna zawierać definicję koloru tła, który zostanie zastosowany, jeśli wystąpią problemy z wczytaniem obrazów.

Składnia własności background jest dość elastyczna, ale obowiązują w niej pewne zasady, których trzeba przestrzegać. Poniżej jest przedstawiona jej ogólna postać pojedynczej grupy:

image position / size repeat attachment origin clip color

W składni tej obowiązują następujące zasady:

• Każdy element może występować zero razy lub raz.
• Wartość rozmiaru (size) musi znajdować się za wartością pozycji (position) i musi być od niej oddzielona ukośnikiem.
• Wartości początku (origin) i obcięcia (clip) mogą być takie same, więc w ich przypadku ważna jest kolejność. Jeśli podana jest tylko jedna z nich, to ustawia obie własności tak samo. Jeśli podane są dwie, to pierwsza odnosi się do własności background-origin.
• Wartość koloru (color) może być zdefiniowana tylko na ostatniej warstwie.
• Każdej własności, dla której nie została podana wartość, nadawana jest jej wartość domyślna.

Zgodnie z powyższymi zasadami wszystkie poniższe deklaracje są poprawne pod względem składni:

background: url("obraz.png") border-box content-box no-repeat scroll center / 120px 120px lightyellow;

background: no-repeat border-box content-box scroll center / 120px 120px lightyellow url("obraz.png");

background: lightyellow center / 120px 120px no-repeat border-box content-box scroll url("obraz.png");

background: 
  url("obraz.png") border-box content-box no-repeat scroll center / 120px 120px,
  url("obraz2.png") border-box padding-box repeat fixed center / 120px 120px,
  url("obraz3.png") padding-box content-box no-repeat local 170px 3em / 120px 120px red
;

Zastosowanie

Własność CSS background ma zastosowanie do wszystkich elementów HTML.

Podsumowanie