Tomáš Daněk

Sdružená definice pozadí – background

Umožňuje zkrácený zápis všech vlastností pozadí:

• background-color
• background-image
• background-position
• background-repeat
• background-attachement

body {background: #cf3 url(../images/pozadi.jpg) top left repeat-x;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Barva pozadí – background-color

p {background-color: #cf3;}
#header p {background-color: transparent;}

Obrázek na pozadí – background-image

body {background-image: url(../images/pozadi.jpg);}
.zadny-obrazek {background-image: none;}

Pozice obrázku na pozadí – background-position

body {
  background: url(../images/pozadi.jpg) no-repeat;
  background-position: center bottom; /* osa x a osa y */
}

Ekvivalentní zápisy:

• left top ~ 0% 0% ~ 0 0
• right bottom ~ 100% 100%

Pokud uvedete pouze jednu hodnotu, druhá se automaticky nastaví na střed:

• 0 ~ left ~ left center ~ 50% 50%
• 50% ~ center ~ center center ~ 50% 50%
• 100% ~ right ~ right center ~ 100% 50%
• top ~ center top ~ 50% 0% ~ 50% 0
• bottom ~ center bottom ~ 50% 100%

V jedné deklaraci nepoužívejte současně textové a číselné hodnoty.

Opakování obrázku na pozadí – background-repeat

body {
  background-image: url(../images/pozadi.jpg);
  background-repeat: repeat-x; /* repeat-y, no-repeat, repeat */
}

Posouvání obrázku na pozadí – background-attachment

body {
  background-image: url(../images/pozadi.jpg);
  background-attachment: fixed;
}

IE6- umožňuje použít hodnotu fixed pouze pro element body.