6. lekce 3. část - obrázek na pozadí elementu
Další možnost, jak využít obrázek na stránce, je vložit ho na pozadí v podstatě kteréhokoliv elementu (tagu, objektu, prvku) stránky, nejčastěji těla stránky (body). Pokud se neurčí jinak (ve stylu, jak si ukážeme), obrázek na pozadí se automaticky opakuje tak, aby vyplnil celé pozadí elementu. Velké obrázky se na pozadí stránky vkládají spíše výjimečně - dlouho se načítají a text na nich může být špatně čitelný. Častěji se používají malé obrázky (dlaždice) k vylepšení vzhledu stránky, nebo k vytvoření "pseudo" čar, rámečků a podobných efektů. Takový malý obrázek se do vyrovnávací paměti načte jen jednou, o jeho "rozmnožení" na stránce se postará prohlížeč.
První možnost pro vložení obrázku na pozadí "něčeho" je použít ve zdroji stránky (html) parametr background s názvem obrázku, například pro tag body (neboli pro pozadí celé stránky):
<body background=název.jpg bgcolor=blue>
Druhý parametr bgcolor v ukázce určuje barvu pozadí stránky - pokud prohlížeč neumí zobrazit obrázek, nebo spíše má vypnuto zobrazení obrázků, potom by se použila uvedená barva. Takto nastavené pozadí najdete spíš jen ve starších stránkách, protože jak víme, veškeré vlastnosti stránky bychom měli upravovat pomocí stylů (css).
Častější a výhodnější, je tedy přidat obrázek na pozadí vybranému tagu v souboru stylů (css) pomocí vlastnosti background-image.
Jako parametry pro tuto vlastnost lze použít například:
background-repeat: no-repeat (standardně je přednastaveno background-repeat: repeat - to je ono opakování obrázku na pozadí)
background-repeat: repeat-x (opakování jen ve vodorovném směru, např. opakování malého obrázku může simulovat čáru)
background-repeat: repeat-y (opakování jen ve svislém směru)
background-position: center center (umístění obrázku ve vodorovném a svislém směru, další možnosti pro vodorovný směr jsou left, right, pro svislý směr top, bottom, nebo určení polohy pomocí % či pixelů)
background-attachment: fixed (pozadí se "neroluje", zůstává na místě, nepoužijete-li, je přednastavena hodnota scroll)
Vlastnosti tagu body (ale uvedené vlastnosti by se mohly využít i u ostatních tagů) by v souborů stylů (css) potom mohly vypadat například takto:
body {
color: Maroon;
font-size: 15pt;
font-family: Arial, Helvetica, sans-serif;
background-color: black;
background-image: url(image.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
Úkoly:
Úkol (2 body):
Na stránku vtipy.html zkus dát větší obrázek na pozadí tak, aby se neopakoval, neroloval a byl uprostřed (do css).
Úkol (2 body):
Stránku index.html vylepši o obrázkové pozadí tvořené opakováním malého "dlaždicového" obrázku (do css). Nějaká taková pozadí můžeš najít na školním disku Z:/grafika pro web/pozadí.
| Název školy: | Základní škola, Hradec Králové, M. Horákové 258 |
| Název projektu: | EU peníze školám |
| Číslo projektu: | CZ.1.07/1.4.00/21.2575 |
| Téma: | Tvorba WWW stránek |
| Název: | VY_32_INOVACE_06c_10B_tvorba www6c |
| Autor: | Pavel Petr |