#1 Pozadí
U jakéhokoli prvku lze použít dva typy pozadí – barvu nebo obrázek. Barva se definuje vlastností background-color a obrázek vlastností background-image, přičemž obě verze lze napsat do zkrácené vlastnosti background.
#2 Barva na pozadí
Barvu na pozadí lze umístit pomocí CSS vlastnosti background-color. Hodnotou vlastnosti mohou být barevné formáty RGB, HEX a podobně, nebo prostý název základní barvy, jestliže existuje v seznamu zakódovaných barev.
Pozadí lze také definovat průhlednost opacity, která se ale také aplikuje na všechny vnořené prvky. Proto existuje barevná průhlednost, spojená s barevnými formáty, která definuje pouze průhlednost dané barvy.
Níže se nacházejí tři příklady s totožným pozadím, kde každý je zapsán jiným způsobem.
body {
background-color: black; /* Slovně */
}
body {
background-color: #000000; /* HEX */
}
body {
background-color: rgba(0, 0, 0, 1); /* RGBA */
}
#3 Obrázek na pozadí
Na pozadí lze také umístit jakýkoliv obrázek pomocí vlastnosti background-image. Tato vlastnost se pojí s dalšími třema vlastnostmi background-position, background-size a background-repeat.
Definování obrázku
Obrázek, který chceme umístit na pozadí prvku, se vkládá do již zmíněné vlastnosti background-image. Avšak, cesta k obrázku se musí specifikovat do funkce url(), která obrázek vyhledává a následně ho předá vlastnosti, která ho zobrazí. Ve finále to tedy může vypadat takto:
body {
background-image: url('obrazek.jpg');
}
/* Pokud je obrázek v adresáři img */
body {
background-image: url('img/obrazek.jpg');
}
Velikost obrázku
Obrázek na pozadí nemusí vždy nutně pokrývat celou obrazovku, jak je to v základním nastavení nastaveno. S velikostí se manipuluje pomocí vlastnosti background-size, která může obsahovat procentuální a absolutní hodnoty nebo klíčová slova contain a cover. Procentuální a absolutní hodnoty nastavují prvně šířku obrázku, pakliže jsou dvě nastavují i jeho výšku.
body {
background-image: url('img/obrazek.jpg');
background-size: 50% 300px;
}
Klíčové slovo contain způsobuje, že se obrázek zvětší na nejmenší rozměr prvku (jestliže je výška menší než šířka, roztáhne se 100 % výšky) a následně se bude kopírovat po velikosti druhého rozměru, dokud nenarazí na konec, kde může zůstat uříznutý. Tomuto lze předejít vlastností background-repeat.
Na druhou stranu, klíčové slovo cover, roztáhne obrázek v jeho poměru stran tak, aby pokryl celý prvek – nebude se opakovat, celý prvek již obrázek pokrývá.
body {
background-image: url('img/obrazek.jpg');
background-size: cover;
}
Opakování se obrázku na pozadí
Vlastnost background-repeat definuje, zda se bude obrázek opakovat, aby vyplnil celý prvek. Obsahovat může pouze klíčová slova, z nichž nejzákladnější jsou:
- repeat – základní vlastnost, opakuje se na všech osách (výška i šířka)
- repeat-x – opakuje se pouze do šířky (na ose X)
- repeat-y – opakuje se pouze do výšky (na ose Y)
- no-repeat – obrázek se neopakuje, na pozadí je pouze jednou
body {
background-image: url('img/obrazek.jpg');
background-repeat: no-repeat;
}
Umístění obrázku
Obrázek lze umístit na libovolné místo v prvku s vlastností background-position, která funguje totožně jako CSS vlastnost position. Její hodnotou mohou být klíčová slova top, bottom, left, right a center nebo jakákoliv procentuální nebo absolutní číselná hodnota, kde první udává pozici na ose X (šířka) a druhá na ose Y (výška).
body {
background-image: url('img/obrazek.jpg');
background-position: 300px 150px;
}
Vlastnost background-position má také jednu unikátní vlastnost, a to, že čárkami lze oddělit definice polohy obrázku, pokud se jich na pozadí nachází vícero.
body {
background-image: url('img/obrazek.jpg');
background-repeat: repeat-x;
background-position: 300px 150px, 200px 200px, center;
}