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

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.

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ů 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;
}

Historická vložka o zpětné kompatibilitě

Kolem roku 2011 jsem praxi jsem narazil na špatně řešitelný problém se zpětnou kompatibilitou. Výše uvedený zápis stylu background-image je pro starší prohlížeče (zejména Internet Explorer 7 a 8) chybný, protože nechápou tu čárku, a tak celý zápis zcela ignorují a nevykreslí pozadí žádné. Nevím, jak to v CSS řešit, možná hackovat pomocí selektorů nebo raději podmíněnými komentáři, což je ale taky otrava. Proto doporučuji pro zajištění potřebného efektu používat nadále matrjoškový zápis vnořeného prvku v HTML, jak jsme byli vždy zvyklí:

<style>
#prvek {background-image: url("druhy.png"); }
#vnoreny-prvek {background-image: url("prvni.png");}
</style>
...
<div id="prvek">
<div id="vnoreny-prvek">
:::obsah prvku:::
</div>
</div>

V roce 2016 jednoznačně doporučuji další možnost: starší prohlížeče prostě oželet. Dobré doporučení je nastavit pozadí barvu. Kdyby všechno selhalo, barva neselže.

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

Barevné gradienty jako pozadí

Linear-gradient

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

background-image: linear-gradient(yellow, red);

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

background-image: linear-gradient(to right, yellow, red);

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":

background-image: linear-gradient(30deg, yellow, red);

Není problém přidat barvy:

background-image: linear-gradient(to right, yellow, red, green, fuchsia);

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ě".

background-image: linear-gradient(to right, yellow, red, green 20%);

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.

Radial-gradient

Kulaté gradienty, 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.

background-image: radial-gradient(yellow, red);

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

background-image: radial-gradient(circle, yellow, red);

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.

background-image: radial-gradient(circle at 80% 20%,yellow,red);

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

background-image: radial-gradient(circle closest-side at 80% 20%,yellow,red);

Repeated-linear-gradient a repeated-radial-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. Dobrou noc.

 

 

Poslední aktualizace 17. 2. 2016

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.