Tento tutoriál přináší přehled, jak lze měnit v tématu vzhled pozadí stránek. Pomocí doplňkového CSS kódu lze změnit barvu pozadí nebo vložit obrázek. U něj můžeme nastavit šířku, výšku, absolutní nebo relativní pozicování, opakování dlaždic vodorovně, horizontálně nebo obojí. Kód vkládáme do paletky Page Inspector / Header / CSS. Ne každé téma ale tuto změnu umožňuje - některá již mají pozadí definováno právě pomocí CSS. Doporučuji vyzkoušet např. na kopii tématu Cameo, které je standardně dodáváno s programem RapidWeaver.

---

Pro změnu barvy pozadí stačí vložit následující úryvek CSS se zápisem barvy v hexadecimálním kódu:

body {
background-color: #FEE190;
}

Dostanete jednolitou plochu.

---

Pokud chcete mít pozadí stránek se strukturou, je potřeba vytvořit vzorek a použít následující kód:

body {
background-image: url('assets/pattern.jpg');
}

Pro vyzkoušení si stáhněte tento vzorek: a vložte jej do paletky Page Inspector / Header / Assets. Pokud není určeno jinak (a v tomto případě není), vložený obrázek se automaticky opakuje horizontálně i vertikálně, čímž dostanete pravidelný dlaždicový vzor. Velikost vzorku (dlaždice) je potřeba zvolit úměrně k hrubosti výsledného efektu.

---

Obrázek lze také připravit jako úzký vodorovný proužek a opakovat jej pouze svisle.

body {
background-image: url('assets/pattern.jpg');
background-repeat: repeat-y;
}

Výška může být pouze 1 px, jeho opakováním docílíme pokrytí celé plochy pozadí po vertikále.

---

Opakování pouze v jedné ose, tentokrát vorovné, využijeme pro vytvoření malého stínku. Navíc je zde použito pevné ukotvení k hornímu okraji.

body {
background-image: url('assets/stinek.jpg');
background-repeat: repeat-x;
background-position: top center;
}

Pro vyzkoušení si stáhněte tento obrázek: a vložte jej do paletky Page Inspector / Header / Assets. Jeho šířka opět může být pouhý 1 px, udělal jsem jej trochu širší, aby ho bylo možné na této stránce najít.

---

Zdroj: www.w3schools.com

tag: layout, CSS, pozadí, pozice