Obrázky

S obrázky můžeme pracovat v HTML souboru, ale i v CSS pravidlech. Při načítání obrázků je potřeba kontrolovat jejich umístění.

Element <img>

Nepárový tag zobrazující obrázek v HTML souboru. Má dvě potřebné vlastnosti (atributy):

src - obsahuje cestu k obrázku, který se má zobrazit.
alt - alternativní text. Zobrazí se, pokud se obrázek nenačte.

<img src="../images/superman.jpg" alt="Tady je logo Supermana">

Tady je logo Supermana

CSS pravidlo background

Tohle pravidlo pracuje s obrázky tak, že je vkládá na pozadí daných elementů. Pravidlo background je zkrácené zapsání těchto pravidel.

backgound-color nastaví danému elementu barvu pozadí.
background-image: nastaví elementu obrázek na pozadí.
background-position: umístí obrázek na určenou pozici (osa x a y)
background-size: velikost obrázku na pozadí.
background-repeat: definuje, jak se bude obrázek opakovat na pozadí.
background-attachment: určuje chování obrázku při scrollování (pro tag <body>)
#boxSuperman{
    background: url(../images/superman.jpg) center right no-repeat;
}

Tohle je box s logem Supermana na pozadí.