Background-image

CSS vlastnost background-image určuje obrázek na pozadí. Případně gradient na pozadí.

background-image
hodnoty	obrázkové pozadí
url("obrazek.*")	obrázek vyplní pozadí prvku
none	prvek nemá obrázek na pozadí
url("obrazek1."), url("obrazek2.),...	více obrázků na pozadí - dává smysl s průhlednými nebo umístěnými neopakovanými obrázky
image-set(...)	na pozadí jsou v různých zařízeních (třeba v mobilech) různé obrázky
gradient	na pozadí je barevný přechod

Každému prvku html stránky se dá nastavit obrázek na pozadí. Obrázek musí být v externím souboru a zapisuje se jako url. Obrázku na pozadí se dá nastavit, jestli se bude opakovat a kde přesně bude.

Některým tagům v některých prohlížečích a operačních systémech se nedá nastavit obrázek na pozadí. Jde samozřejmě o tag iframe (v žádném prohlížeči), protože ten načítá obsah odjinud, a tagy <select> a <option> v Internet Exploreru. A samozřejmě v mnoha případech pozadí není vidět, například když dám pozadí neprůhlednému obrázku nebo videu bez paddingu.

Každému html prvku se dříve dal nastavit jenom jeden obrázek pozadí. Bylo to občas omezující. Pokud jsem potřeboval nastavit prvku dva obrázky pozadí, musel jsem tag prvku obalit ještě jedním tagem a každému prvku nastavit jenom jedno pozadí. Přibližně od roku 2014 je možno používat více obrázků pozadí pro jeden prvek a nastavit jim případně polohu pomocí background-position.

Od roku 2013 už lze také spolehlivě používat gradienty, tedy přechody barev. Formálně vzato patří pod background-image, proto je uvádím na této stránce. Většina autorů je ale zapisuje pomocí souhrnné vlastnosti background.

background-image jako gradient
hodnoty	obrázkové pozadí
linear-gradient(parametry, barvy)	lineární přechod barev odshora dolů
radial-gradient(parametry, barvy)	kruhový nebo eliptický přechod barev
repeating-linear-gradient(parametry, barvy)	opakovaný vzorek barevného přechodu
repeating-radial-gradient(parametry, barvy)	opakovaný vzorek eliptického přechodu

Popis gradientů je níže.

Příklady

Nejčastěji se obrázek na pozadí používal u celého dokumentu:

body {background-image: url("pozadi.gif")}

ale dá se nastavit jakémukoliv prvku, třeba nějakému levému oddílu:

div.levy {background-image: url("pozadi.gif")}

Obrázek na pozadí by měl být vždy jištěn barvou na pozadí, zejména při světlém textu a tmavém pozadí. Dost časté je to u různých grafických menu. Pokud budou v prohlížeči vypnuté obrázky (nebo se nestačí stáhnout), viděl by čtenář světlé písmo na bílém:

#menu {background-image: url("tmavy.gif"); color: yellow}

Není to sice úplně špatně, ale správně se tedy přidává barva, nejlépe taková, aby odpovídala ladění obrázku:

#menu {background-image: url("tmavy.gif"); color: yellow; background-color: navy}

Obrázek na pozadí se dá zapsat i souhrnnou vlastností background. Předchozí příklad stručněji:

#menu {background: navy url("tmavy.gif"); color: yellow;}

Vícero pozadí u jednoho prvku se odděluje čárkami:

#menu {background-image: url("pruhledne1.png"}, url("pruhledne2.png");}

Jednoduchý barevný gradient pro celou stránku:

body {background-image: linear-gradient(yellow, red)}

Další příklady jsou níže u výkladu jednotlivých hodnot.

Další příklady

Pozice pozadí, tabulka, pseudopozadí pozicováním

Změna vzhledu odkazu pomocí CSS a pozadí

Podpora

Podpora background-image
Prohlížeč	Podpora ve verzích	Poznámka
Internet Explorer	všechny verze	od verze IE 9 umí i více pozadí, background-size, background-clip a background-origin od verze IE 10 umí gradienty a opakované gradienty
Mozilla (Firefox)	všechny verze
Chrome, Safari, Opera	všechny verze

Pokud v Mozille nebo v Opeře nastavené obrázkové nevidíte, může to být kombinací slova a čísla u vlastnosti background-position (to je bug).

Vícero pozadí (multiple backgrounds)

Podle specifikace CSS 3 se může elementům nastavovat více různých pozadí v jedné deklaraci tak, že se oddělí čárkou:

#prvek {background-image: url("prvni.png"), url("druhy.png"); }

Funguje to ve všech prohlížečích s výjimkou Internet Exploreru do verze 8. Taková věc s více obrázky na pozadí pro jeden prvek může být výhodná zejména v případě, kdy je první obrázek průhledný, nebo se má druhý obrázek opakovat a první ne. To by se například zapsalo opět s čárkou:

#prvek {background-repeat: no-repeat, repeat;)

Případně je možno nastavit, že se obrázky nebudou opakovat a budou v protilehlých rozích. První třeba v levém dolním a druhý v pravém horním.

#prvek {
    background-image: url("prvni.png"), url("druhy.png");
    background-repeat: no-repeat, no-repeat;
    background-position: bottom left, top right;
}

V praxi je lepší takový složitý zápis shrnout do vlastnosti background:

#prvek {
    background:
        url("prvni.png") no repeat bottom left,
        url("druhy.png") no-repeat top right;
}

Poloprůhlednost obrázku na pozadí

Nejde jednoduše v CSS udělat, žádná vlastnost background-opacity k mému překvapení neexistuje. Chcete-li udělat jednoduše poloprůhledný obrázek, musíte použít formát PNG a v grafickém editoru mu nastavit alfa kanál. Pokud na prvek použijete vlastnost opacity (průhlednost), zprůhledníte i obsah prvku, nikoli pouze samotný obrázek na pozadí.

Jde snadno udělat poloprůhlednou barvu pozadí, zápisem rgba. Příklad poloprůhledné červené:

background-color: rgb(255,0,0,0.5);

Pokud prvku nastavíte průhlednost přes opacity, zprůhlední se i obsah, nejenom pozadí.

Barevné gradienty jako pozadí

Barevné gradienty jsou zvláštním druhem brázku. Pokud se je omylem pokusíte nastavovat jako barvu pozadí (background-color), nebude to fungovat. Musíte použít zde popisovanou vlastnost background-image.

V roce 2021 je rozumě použitelných gradientů šest. Lineární gradient (linear-gradient), radiální neboli terčový gradient (radial-gradient), kuželový neboli paprskový gradient (conic-gradient) a tři jejich opakované verze (repeated-*-gradient).

Linear-gradient

Jednoduchý příklad, který vykreslí barevný gradient ze žluté do červené, bráno shora.

Má-li být barevný přechod zleva doprava a nikoli vertikálně, přidá se parametr to right

Dá se i určit přesný úhel, pod kterým má přechod vznikat. Zadává se ve stupních označených "deg":

Není problém přidat barvy:

Nebo určit, od kterého procenta se má začít vykreslovat nějaká barva. Tohle číslo mi funguje pouze v malých hodnotách. Umí zařídit, že barva "předběhne" a začne se vykreslovat "brzo". Neumím zařídit, aby se nějaká barva přestala vykreslovat "pozdě".

Když použiji průhlednou barvu pomocí rgba(), můžu přes sebe nechat kreslit i více lineárních gradientů, navzájem kolmých (první má nastaveno to right):

background-image: linear-gradient(to right,rgba(255,255,0,.4),rgba(255,0,0,0.4) 30%), linear-gradient(rgba(0,0,255,.5), rgba(0,128,0,.6) 30%);

Je to podobné jako u vícero obrázků, prostě gradienty zapíšu za sebe. Stejně tak lze kombinovat gradient s obrázkovým pozadím.

Chcete-li přejít do poloprůhledného gradientu, použijte místo názvu barvy hodnotu transparent. V tomto příkladu se transparent vykreslí jako bílá, protože je bílé pozadí stránky, ale ve skutečnosti je průhledná. Je to způsob, jak vytvořit gradient průhlednosti, i když vlastnost opacity, která normálně dělat průhlednost, gradienty dělat neumí.

Radial-gradient

Kulaté gradienty, kterým občas říkám terčové, pokud se použijí bez parametrů, se snaží zaplnit svůj prvek. Většinou tedy vykreslí elipsu první barvou, která postupně ubývá a mění se v druhou barvu tak, aby druhá barva byla až v rozích.

Parametr s klíčovým slovem circle způsobí, že se místo elipsy začne vykreslovat přesný kruh:

Se středem kruhu se dá posunout. Nedělá se to pomocí background-position jako u obrázku, ale klíčovým slovem at. Za něj můžu dát klíčová slova top, bottom, right a left, nebo procenta. První údaj patří x-ové souřadnici, druhý y-ové. Kruh může být větší, protože nyní se druhá barva vykreslí pouze v nejvzdálenějším rohu.

Další způsob, jak kruh zvětšit, je přidat nějaké z klíčových slov, které nastaví, odkud kam se má gradient vykreslit, nebo přesněji kde už se má dosáhnout druhé (či poslední) barvy. Výchozí hodnota je farthest-corner, tedy nejvzdálenější roh. Pokud napíšu closest-corner, vykresluje se gradient ze středu do nejbližšího rohu. Pokud napíšu closest-side, gradient jde jen k nejbližší straně. Farthest-side je vykreslení k nejvzdálenější straně.

Conic-gradient

Conic-gradient vytváří pozadí "kuželové", nebál bych se to nazvat "paprskové". Funguje dobře. Narozdíl od předchozích gradientů nefunguje v Internet Exploreru (žádné překvapení), ten ale už lze od roku 2021 ignorovat.

Pokud se jako parametr uvedou pouze barvy, konický gradient je naskládá za sebe po směru hodinových ručiček. Jako střed gradientu se zvolí střed prvku. Barvy se klasicky oddělují čárkou.

Pokud nechcete mít na začátku a konci gradientu ostrý přechod, nastavte první a poslední barvu stejnou.

Gradient může začínat na jiném úhlu než na dvanácti hodinách. Začátek gradientu se dá ovlivnit klíčovým slovem from (začátek je vidět podle skoku v barvách). Úhel se stanovuje v úhlových jednotkách (např. 20deg pro 20 stupňů, 1 grad pro 1 gradián, 0.75 turn pro třičtvrtě kruhu). Střed kužele se dá posunout kamkoli po prvku (a dokonce i mimo prvek) klíčovým slovem at následovaný dvěma souřadnicemi (x,y). Pokud je použito from i at, from musí být před at. Za těmito deklaracemi musí být čárka, mezi nimi ne.

background-image: conic-gradient(from 135deg at 20% 80%, blue, gray, khaki, pink);

Dokonce se dá i předepsat, na kterých úhlech budou začínat a končit které barvy. Lze se setkat se čtyřmi zápisy:

pokus o pochopení zápisu barev a úhlů v conic-gradient
zápis barvy a úhlu v conic-gradient	příklad	efekt
barva bez úhlu,	blue,	barva se rovnoměrně vmáčkne mezi dvě sousední barvy
barva s jedním úhlem,	blue 150deg,	na úhlu končí celistvá barva, dále přechází do gradientu. Pokud je z obou stran ovlivněna gradienty, určuje úhel jediné místo, kde bude barva čistá. Za předpokladu, že nebude ovlivněna sousedními zarážkami.
barva se dvěma úhly,	blue 90deg 150deg,	na prvním úhlu začíná celistvá barva, na druhém celistvá barva končí. V okolí může přecházet do svých gradientů. Pokud je druhá hodnota nižší než první, ignoruje se.
úhel bez barvy, (oddělený čárkou)	80deg,	zarážka na daném úhlu říká, kde má gradient sousedních barev střední bod (průměr přechodových barev). Pokud je zarážka mimo úhel sousedních zarážek, vznikne mezi barvami ostrý přechod.

Pokus o souhrnný příklad:

background-image: conic-gradient(aqua 30deg, 40deg, yellow 120deg 180deg, green 90deg, pink);

Příklad říká, že od 0 do 30deg bude barva aqua. Střed gradientu aqua a žluté (nazelenalý přechod) bude na 40deg. Žlutá se bude vykreslovat čistě od 120deg do 180deg. Následující zelená (green) se chce čistě vykreslovat na 90deg, ale tam už je žlutý přechod. Střed zelené se tedy posune do konce žluté (180deg) a místo pozvolného přechodu se vykreslý ostrý přechod mezi žlutou a zelenou. To vše, protože zelená se chce kreslit tam, kde už je jiná barva. Přechod do růžové (pink) už je normální.

Repeated-linear-gradient, repeated-radial-gradient a repeated-conic-gradient

Hele, chce se mi spát, tak si to někde naštudujte. Dají se tím dělat různé linky a vlnky jako na vodě. Funguje to dobře.

Gradienty pod rámečkem

Gradienty se interpretují jako obrázky pozadí, takže se například nekreslí pod rámečky (border). Pokud potřebujete, aby přesahovaly přes rámeček, musíte nastavit background-origin: border-box;.

Poloprůhledné gradienty pro mask-image

Jestli se dostanete k práci s vlastností image-mask, můžete jako hodnoty zadávat i výše popsané gradienty. Něco budou dělat ty, které mění průhlednost, tedy alpha kanál v zápisu RGBA nebo pomocí barvy transparent.

-webkit-mask-image: linear-gradient(to right, blue, rgba(0,0,255,0.7), transparent); mask-image: linear-gradient(to right, blue, rgba(0,0,255,0.7), transparent);

k tomu je ale nutné říct, že takový zápis ovlivňuje (zprůhledňuje) veškerý obsah prvku, nikoli pouze pozadí. V roce 2022 je ještě pro zápis gradientů potřeba používat zápis -webkit-mask-image, což je pěkná otrava.

Různá pozadí pro různá zařízení - image-set

Různé pozadí pro různá zařízení nebo šířky prohlížeče jde samozřejmě udělat primárně přes media queries. Asi někdo cítil potřebu udělat pro vlastnost background-image ještě jiný zápis, takže jednou bude fungovat toto:

p {
    background-image: image-set(
        "pozadi1.jpg" 1x,
        "pozadi2.jpg" 2x,
        "pozadi3.jpg" 600w
    )
}

Jak si možná všímáte, zápis image-set je podobný zápisu různých obrázků v HTML u tagu img a atributu srcset. Pokud ho znáte, není třeba moc vysvětlovat. Ale v rychlosti: pravidlo 1x se použije tam, kde má zařízení pro jeden obrazovkový bod jeden pixel. Pravidlo 2x se použije tam, kde má zařízení pro jeden obrazovkový bod 2 nebo více pixelů. Pravidlo 600w se použije tam, kde je šířka prohlížeče menší než 600 pixelů. Příklad je velmi umělý, v praxi se používá buďto rozhodování podle šířky (pravidla w), nebo rozhodování podle počtu bodů na pixel (pravidla x). Viděl jsem i pravidla podle počtu dpi pro tiskové verze.

Problematická je zatím podpora (2021). Chrome a příbuzné prohlížeče vyžadují prefix -webkit-, Safari zase umí jenom x pravidla, neumí w pravidla.

Poslední aktualizace 23. 12. 2016

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně