V několika krocích si ukážeme, jak snadno změnit pozadí šablony. Zkusíme změnit barvu pozadí, vkládat do pozadí fotografii nebo obyčejný obrázek.

Vše podstatné jsme si už popsali výše, tak můžeme pokračovat už v jednotlivých krocích.

Celé to závisí na velikosti obrázku a toho, co vlastně chcete. Podle toho také budeme upravovat CSS kód.

• Velký obrázek nebo fotografie na pozadí
• Např.: šablona A, na pozadí je jeden velký obrázek


•  

• Malý obrázek, který se mi bude kopírovat v pozadí
• Např.: šablona F má na pozadí malý obrázek, který se kopíruje a vytváří tak mřížku

Varianta 1: Velký obrázek nebo fotografie na pozadí

1. Uložte obrázek do administrace v Nastavení - Rozšířené - Obrázky. Adresu obrázku (napr.: /img/40/obrazek.jpg) si někam schovejte nebo uložte, ať se poté nemusíte vracet.
2. Přejděte do Nastavení - Vzhled - Design a klikněte na Upravit CSS
3. Tato část se bude opět lišit u každého designu, ale pořád mám vybranou šablonu D zelenou a najdu následující kód: body{background:#CCEA81;text-align:center;font-family:Tahoma,Arial,sans-serif;font-size:.8em;margin:0px;padding:0px}
4. Tuto část vezmeme background:#CCEA81;  a nahradíme vlastní částí background: url(/img/40/obrazek.jpg) no-repeat; všimněte si, že za url jsem vložil i adresu již dříve uloženého obrázku.
5. Dejte uložit jako novou šablonu.

Dosáhli jsme teď toho, že obrázek se umístí vlevo nahoře a díky parametru no-repeat za adresou obrázku se nebude kopírovat směrem doprava a potom i dolů. Pokud chcete obrázkem pohybovat směrem doprava nebo dolů, tak jednoduše za no-repeat připište třeba 20% 0%. Obrázek se vám posune zleva o 20 % celkové šířky okna. První parametr je posouvání zleva a druhý odshora. Místo procent mužete použít i parametry center, left center right pro posun zleva nebo top, center, bottom pro posun odshora.

Takže pokud mám velký obrázek a chci jej na pozadí celé stránky, protože vím, že je širší jak 800px, tak kód bude:

background: url(/img/40/obrazek.jpg) no-repeat 50% 50%;

nebo

background: url(/img/40/obrazek.jpg) no-repeat center center;

Upozornění: pokud to zkoušíte na jiné šabloně, tak v bodě 3 můžete narazit na kód, který je opět odlišný, a už v něm něco takového je background: url(/img/40/obrazek.jpg) no-repeat 50% 50%;. V tomto případe jen vezměte adresu obrázku a vložte ji do závorek za url. Poté si můžete kód upravit, jak chcete, nebo jednoduše zbytek za závorkou umažte a nechte jen středník.

Upozornění2: Hodně šablon má také obrázek v pozadí uložen ješte na jiném místě v CSS šablone. Najdete ho v

Řádek s background: smažte až po nejbližší středník, ale pouze background, nemažte celý #document. Obsahuje důležité parametry a mohli byste si poškodit šablonu.

Varianta 2: Malý obrázek nebo fotografie na pozadí

Podobný postup jako předtím:

1. Uložte obrázek do administrace v Nastavení - Rozšířené - Obrázky. Adresu obrázku (napr.: /img/40/obrazek.jpg) si někam schovejte nebo uložte, ať se poté nemusíte vracet.
2. Přejděte do Nastavení - Vzhled - Design a klikněte na Upravit CSS
3. Tato část se bude opět lišit u každého designu, ale pořád mám vybranou šablonu D zelenou a najdu následující kód: body{background:#CCEA81;text-align:center;font-family:Tahoma,Arial,sans-serif;font-size:.8em;margin:0px;padding:0px}
4. Tuto část vezmeme background:#CCEA81;  a nahradíme vlastní částí background: url(/img/40/obrazek.jpg); opět si všimněte, že za url jsem vložil i adresu již dříve uloženého obrázku.
5. Dejte uložit jako novou šablonu.

V čem je od Varianty 1 změna? Jednoduše jsem umazal no-repeat a docílil tak toho, že obrázek se bude sám kopírovat doprava i dolů.

Většina šablon má nahoře úzký pás, který je obrázek, a směrem dolů přechází nějakou barvu. K tomu nám slouží takovýto kousek kódu:

background: #eeccdd url(/img/40/obrazek.jpg) repeat-x;

Těm všímavějším neunikne, že jsme jen spojili všechny varianty dohromady. Za background vidíme definovanou barvu pozadí #eeccdd opět v hexa, ale můžeme zde napsat třeba white. Poté url(), která nám udává adresu obrázku, a nakonec repeat-x, které obrázku říká, aby se kopíroval pouze v Xsové ose (obrázek se bude kopírovat doprava). Pokud chci, aby se kopíroval směrem po Ynové ose (čili směrem dolů), změním parametr na repeat-y.

Petr Zapletálek