Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Michal Sonnek. Obchodní akademie a Střední odborná škola logistická, Opava, příspěvková organizace. Vzdělávací materiál byl vytvořen v rámci OP VK 1.5 – EU peníze středním školám, registrační číslo CZ.1.07/1.5.00/ Pozadí ledna 2013 VY_32_INOVACE_160314_POZADI_DUM

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Vlastnosti pozadí Nastavení vlastnosti background umožní definování vlastností pozadí elementu. Tento parametr je možné použít na nastavení pozadí textu, odstavce, celé stránky,… Parametry: background-color, background-image, background-position, background-repeat, background-origin, background-attachment. 2

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás background-color Vlastnost určuje barvu pozadí. Hodnoty: barva, transparent, inherit. Příklad: body { background-color: black } 3

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás background-image Parametr určuje obrázek umístěný na pozadí. Hodnoty: url, none, inherit. Příklad: body {background- image:url(obr/podklad.jpg} 4

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás background-position Určuje polohu obrázku definovaného na pozadí. Hodnoty: %, jednotky délky, top, center, bottom, left, right, inherit. 5

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás background-position Výchozí hodnota je 0% 0% = top left. Obecná syntaxe: background-position: hodnota background-position:hodnota hodnota Příklad: body { background-image: url(obr/podklad.jpg no-repeat; background-position:right top } 6

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás background-repeat Určuje chování obrázku na pozadí. Hodnoty: repeat, repeat-x, repeat-y, no-repeat, inherit. Příklad: body { background-image: url(obr/podklad.jpg; background-repeat:repeat-x } 7

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás background-origin Vlastnost určuje výchozí bod, od něhož se začíná obrázek na pozadí elementu vykreslovat. Hodnoty: border, padding, content. Příklad: div {border: 15px solid grey; padding:url(podklad.gif) no- repeat; background-origin:content } 8

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás background-attachment Určuje způsob posouvání obrázku na pozadí. Hodnoty: scroll, fixed, inherit. Příklad: body { background-image: url(obr/podklad.gif) background-attachment:fixed } 9

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zadání vlastností v jednom zápisu div { background:#CC url(picture/p1.jpg) top right repeat-x } 10

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Své znalosti si zopakujte v zde. Kvíz 11

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zdroje: JIŘÍ KROUŽEK, Martin Domes. CSS: Kapesní přehled. Vyd. 1. Brno: Computer Press, ISBN STANÍČEK, Petr. Kompletní průvodce CSS: kaskádové styly. Vyd. 1. Brno: Computer Press, 2003, 178 s. ISBN GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 a CSS3 pro webové designéry. Vyd. 1. Brno: Zoner Press, 2011, 286 s. Encyklopedie webdesignera. ISBN W3C. Kaskádové styly: domovská stránka [online] , 06:20:10 [cit ]. Dostupné z: 12

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zdroje – cvičný příklad Extensible Markup Language. [online] [cit ]. Dostupné z: Obrázky – xml2.gif content/uploads/2012/04/XML2.gif – xml1.png zqg6DaDFQ3JMCDRFW-aHw0IKwGAY2GU5R9VSpONNLw 13