Ostatnio edytowany:

background

Autor: Virtual Patriot

Opis 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.

Dodatkowe techniczne informacje 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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

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

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

Edge

tak

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

grupa wartości

Opis

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

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.

Wartość domyślna

transparent

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.

Wartość domyślna

none

position

Składnik position nie jest 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.

Wartość domyślna

0% 0%

/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.

Wartość domyślna

repeat

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.

Wartość domyślna

scroll

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.

Wartość domyślna

padding-box

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.

Wartość domyślna

border-box

Przykład

  background:pink url(http://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 "http://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(http://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(http://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 "http://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(http://webkod.pl/files/css/obrazek-01.png) center /125px 150px no-repeat scroll border-box content-box"
    </div>

  </body>
</html>

sekwencja wartości

Opis

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(http://webkod.pl/files/css/obrazek-o1.png) center top repeat-y, pink url(http://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(http://webkod.pl/files/css/obrazek-o1.png) center top repeat-y, pink url(http://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(http://webkod.pl/files/css/obrazek-o1.png) center top repeat-y, pink url(http://webkod.pl/files/css/obrazek-o2.png) left top /33% repeat-x fixed;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </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(http://webkod.pl/files/css/obrazek-o1.png) center top repeat-y, pink url(http://webkod.pl/files/css/obrazek-o2.png) left top /33% repeat-x fixed"
    </div>

  </body>
</html>