Autor publikacji: Virtual Patriot - Administrator

background

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - background property (LV3)

Przeznaczenie właściwości `background`

Za pomocą właściwości background możemy określić kilka różnych cech tła interesującego nas elementu HTML.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `background`

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: nie
wartość initial: transparent none 0% 0% /auto repeat scroll padding-box border-box
wyjątki initial: brak
animowanie: tak samo jak dla poszczególnej właściwości CSS, której wartość tworzy poszczególny składnik grupy wartości właściwości background

Interpretacja właściwości `background`

tak

Interpretuje wartość składnika size, origin oraz clip, lecz od wersji "9".

Interpretuje wartość sekwencja, lecz od wersji "9".

tak

Opis wartości właściwości `background`

grupa wartości

Wyjaśnienie

Za pomocą właściwości background oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech tła interesującego nas elementu HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  background:orange url(obrazek-01.png) right bottom /25% 50% no-repeat local content-box padding-box;
}

/* REGUŁA - 2 */
div {
  background-color:orange;
  background-image:url(obrazek-01.png);
  background-position:right bottom;
  background-size:25% 50%;
  background-repeat:no-repeat;
  background-attachment:local;
  background-origin:content-box;
  background-clip:padding-box;
}

Składniki grupy wartości właściwości `background`

            color image position /size repeat attachment origin clip

Ważne

jeżeli w naszym zapisie wystąpi tylko jedna wartość należąca do grupy box (czyli wartość border-box, padding-box lub wartość content-box), wtedy wartość ta określi zarówno wartość składnika origin, jak i wartość składnika clip

podana przez nas grupa wartości właściwości background nie może zawierać wartości globalnych oraz sekwencji wartości

Przykładowe zapisy

red url(obrazek.png) left top fixed

green url(obrazek.png) 10% 20% /25% 50% no-repeat fixed

blue url(obrazek.png) 15px -30px /25% 50% no-repeat fixed content-box

#FD7 url(obrazek.png) right 15px top 45px /25% 50% no-repeat fixed content-box padding-box

color

Składnik color nie jest wymaganym składnikiem grupy wartości właściwości background. Składnik color określa wartość właściwości background-color, czyli kolor tła interesującego nas elementu HTML.

image

Składnik image nie jest wymaganym składnikiem grupy wartości właściwości background. Składnik image określa wartość właściwości background-image, czyli to, który obrazek powinien tworzyć tło obrazkowe interesującego nas elementu HTML.

position

Składnik position nie jest zawsze wymaganym składnikiem grupy wartości właściwości background. Składnik position określa wartość właściwości background-position, czyli względem krawędzi obszaru pozycjonowania pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

/size

Składnik size nie jest wymaganym składnikiem grupy wartości właściwości background. Składnik size określa wartość właściwości background-size, czyli rozmiar obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Sposób podawania

przed wartością składnika size należy umieścić znak /

ponadto gdy w naszym zapisie chcemy określić wartość składnika size, wtedy w naszym zapisie musimy również określić wartość składnika position

Wartość domyślna

auto

repeat

Składnik repeat nie jest wymaganym składnikiem grupy wartości właściwości background. Składnik repeat określa wartość właściwości background-repeat, czyli sposób powtarzania się obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

attachment

Składnik attachment nie jest wymaganym składnikiem grupy wartości właściwości background. Składnik attachment określa wartość właściwości background-attachment, czyli obszar, do którego powinien zostać zaczepiony obrazek tworzący tło obrazkowe interesującego nas elementu HTML.

origin

Składnik origin nie jest wymaganym składnikiem grupy wartości właściwości background. Składnik origin określa wartość właściwości background-origin, czyli obszar pozycjonowania obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

clip

Składnik clip nie jest wymaganym składnikiem grupy wartości właściwości background. Składnik clip określa wartość właściwości background-clip, czyli sposób przycięcia tła interesującego nas elementu HTML.

Przykład

  background:pink url(https://webkod.pl/files/css/obrazek-01.png) center /125px 150px no-repeat scroll border-box content-box;

cechy tła tego elementu "div" zostały zmienione (kolorem tła jest kolor różowy, obrazkiem tworzącym tło obrazkowe jest obrazek znajdujący się pod adresem "https://webkod.pl/files/css/obrazek-01.png", obrazek tworzący tło obrazkowe znajduje się na środku względem wszystkich krawędzi obszaru pozycjonowania, rozmiar szerokości obrazka tworzącego tło obrazkowe wynosi 125 pikseli, rozmiar wysokości obrazka tworzącego tło obrazkowe wynosi 150 pikseli, obrazek tworzący tło obrazkowe nie jest powtarzany, obrazek tworzący tło obrazkowe jest zaczepiony do obszaru tła tego elementu "div", obszarem pozycjonowania obrazka tworzącego tło obrazkowe jest obszar wyznaczony przez zewnętrzne krawędzie obramowania tego elementu "div", ponadto kolor tła oraz obrazek tworzący tło obrazkowe są przycięte do obszaru wyznaczonego przez rozmiar obszaru zawartości tego elementu "div"), ponieważ do tego elementu "div" została dodana właściwość "background" wraz z następującą grupą wartości: "pink url(https://webkod.pl/files/css/obrazek-01.png) center /125px 150px no-repeat scroll border-box content-box"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background:pink url(https://webkod.pl/files/css/obrazek-01.png) center /125px 150px no-repeat scroll border-box content-box;
        border:15px dashed black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      cechy tła tego elementu "div" zostały zmienione (kolorem tła jest kolor różowy, obrazkiem tworzącym tło obrazkowe jest obrazek znajdujący się pod adresem "https://webkod.pl/files/css/obrazek-01.png", obrazek tworzący tło obrazkowe znajduje się na środku względem wszystkich krawędzi obszaru pozycjonowania, rozmiar szerokości obrazka tworzącego tło obrazkowe wynosi 125 pikseli, rozmiar wysokości obrazka tworzącego tło obrazkowe wynosi 150 pikseli, obrazek tworzący tło obrazkowe nie jest powtarzany, obrazek tworzący tło obrazkowe jest zaczepiony do obszaru tła tego elementu "div", obszarem pozycjonowania obrazka tworzącego tło obrazkowe jest obszar wyznaczony przez zewnętrzne krawędzie obramowania tego elementu "div", ponadto kolor tła oraz obrazek tworzący tło obrazkowe są przycięte do obszaru wyznaczonego przez rozmiar obszaru zawartości tego elementu "div"), ponieważ do tego elementu "div" została dodana właściwość "background" wraz z następującą grupą wartości: "pink url(https://webkod.pl/files/css/obrazek-01.png) center /125px 150px no-repeat scroll border-box content-box"
    </div>

  </body>
</html>

sekwencja wartości

Wyjaśnienie

Za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka grup wartości właściwości background możemy sprawić, że tło interesującego nas elementu HTML będzie składało się z kilku obrazków o różnych cechach jednocześnie. W takiej sytuacji ewentualną wartość koloru tła należy podać wyłącznie w ostatniej grupie wartości właściwości background.

Przykład

  background:url(https://webkod.pl/files/css/obrazek-o1.png) center top repeat-y, pink url(https://webkod.pl/files/css/obrazek-o2.png) left top /33% repeat-x fixed;

tło tego elementu "div" posiada kolor różowy oraz składa się z dwóch różnych obrazków o różnych cechach jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "background" wraz z następującą sekwencją wartości: "url(https://webkod.pl/files/css/obrazek-o1.png) center top repeat-y, pink url(https://webkod.pl/files/css/obrazek-o2.png) left top /33% repeat-x fixed"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background:url(https://webkod.pl/files/css/obrazek-o1.png) center top repeat-y, pink url(https://webkod.pl/files/css/obrazek-o2.png) left top /33% repeat-x fixed;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      tło tego elementu "div" posiada kolor różowy oraz składa się z dwóch różnych obrazków o różnych cechach jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "background" wraz z następującą sekwencją wartości: "url(https://webkod.pl/files/css/obrazek-o1.png) center top repeat-y, pink url(https://webkod.pl/files/css/obrazek-o2.png) left top /33% repeat-x fixed"
    </div>

  </body>
</html>