Jdi na obsah Jdi na menu
 


Změna obrázku v pozadí šablony

Obtížnost
 
 

 Změna obrázku v pozadí

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

  •  

clipboard01.jpg

  • 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

 

clipboard01.jpg

 

 

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í čás 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

#document {
    background-imageurl("http://www001.estranky.cz/resources/userServers/design_1000000002/img/bg3.jpg");
}

Řá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í čás 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

 
18. 3. 2011

Komentáře

Lucie 15. 1. 2017 15:48

obrázek nebo barva na pozadí příspěvku

Hezký den, jak se dá vložit pozadí do pozadí příspěvku? Pomocí HTML? Když kod vložím přímo v editaci příspěvku, tak se mi v editoru ukáže, ale ve výsledných stránkách už ne. Mám styl D-modrý. Děkuji. E-mail: mihulkova.l@seznam.cz

Lucie 6. 11. 2016 8:15

stránky, patička

Hezký den, mám problém u těchto stránek.
http://www.taekwondo-havirov.estranky.cz/
Patička se mi celá posunula doleva. Děkuji za radu.

Lucie 6. 11. 2016 8:16

Re: stránky, patička

můj mejl: mihulkova.l@seznam.cz

Petr Doseděl - eStránky.cz 7. 11. 2016 12:50

Re: Re: stránky, patička

Zdravím,
někde v kódu budete pravděpodobně mít navíc ukončovací značku </div>. Pokud si s opravou nebudete vědět rady, napište na podpora@estranky.cz - něco vymyslíme.

Lucie 15. 5. 2016 20:05

úprava u těchto stránek

Hezký den, co tady s těmi stránkami?
http://taekwondo-havirov.estranky.cz
U každých se mi nezobrazuje pozadí, nebo je to posunuté dolů celé, když změním jiný styl.

Zuzka 28. 7. 2015 19:12

Změna pozadí

Dobrý den,
chci si změnit pozadí stránek www.cat-birma.cz. Můžete mi napsat, kam přesně mám vložit adresu obrázku?

Děkuji Vám

Honza 29. 5. 2015 15:51

Styl C - hnědý

Dobrý den,
zajímalo by mě, jak lze u tohoto stylu změnit obrázek na pozadí.
Děkuji

Petr Doseděl - eStránky.cz 3. 6. 2015 12:40

Re: Styl C - hnědý

Dobrý den,
úpravu úplně snadno provést nelze - Styl C má totiž část pozadí vloženou v obrázku horní části stránek. Všechno okolní pozadí ale můžete upravit dle návodu v CSS v části "html, body", kde jsou uloženy informace o barvě pozadí.

Pokud byste úpravu nezvládl a trval na ni, kontaktujte nás na mailu podpora@estranky.cz - kde se můžete domluvit na ceně úpravy našim programátorem.

Hezký den, P. Doseděl

IPSI 3. 9. 2014 23:39

Styl - Trend červený

Dobrý den chtěl bych se zeptal
1. jak u tohoto stylu ,abych mohl změnit obrázek na pozadí.

2.jak změnit bílá pole (mám na mysli např v horní nabídce,na hlavní nabídce atd.) na jinou barvu

Děkuji

Petr Doseděl - eStránky.cz 4. 9. 2014 10:33

Re: Styl - Trend červený

Dobrý den,
při změně pozadí Vás bude v CSS zajímat
".bg { background: #fafafa url("<!--/ img_root /-->background.jpg") no-repeat center center fixed;"

Jednotlivé bloky musíte v CSS najít.
U postranních bloků je to: .column div.section
U menu: #navigation .inner_frame
U drobečkové navigace: #breadcrumb-nav
U textu na úvodní straně: #perex
...

IPSI 4. 9. 2014 20:49

Re: Re: Styl - Trend červený

Díky funguje na výbornou.

Hanka 21. 8. 2014 9:36

vypnutí obrázku v záhlaví

Dobrý den, prosím o radu. Chci si jako pozadí šablony nastavit fotografii, kterou ale ruší obrázek v záhlaví. Jde zobrazení obrázku v záhlaví nějak vypnout? Děkuji předem

Petr Doseděl - eStránky.cz 21. 8. 2014 9:38

Re: vypnutí obrázku v záhlaví

Dobrý den,
napište mi prosím konkrétní stránky, kterých se úprava týká.

Hanka 21. 8. 2014 13:24

Re: Re: vypnutí obrázku v záhlaví

Jde o tyto stránky http://www.body-art.estranky.cz/. Mám v záhlaví obrázek, který jsem si vytvořila, ale protože chci použít do pozadí šablony fotografii, obrázek tam pak zavazí, nevypadá to pěkně. Je možné že jej někdy zase budu chtít vrátit, a pozadí šablony udělám nějaké neutrální. Momentálně ale mám připravenou fotku která se na to pozadí hodí a bude to vypadat moc hezky, když tam nebude ten obrázek...děkuji

Petr Doseděl - eStránky.cz 21. 8. 2014 13:29

Re: Re: Re: vypnutí obrázku v záhlaví

Je potřeba upravit CSS šablony. Jsou dvě možnosti. Buď obrázek v záhlaví úplně odstraníme, nebo ho jen skryjeme (tzn. zůstane na stránce volné místo).

Pro první variantu vložte nakonec CSS #header {display: none;}
pro druhou pak #header {visibility: hidden;}

Stačí takto?

Hanka 21. 8. 2014 14:00

Re: Re: Re: Re: vypnutí obrázku v záhlaví

Moc děkuji, funguje :-)

Colos 20. 5. 2013 17:40

Styl S - hnědý

Vůbec to nemohu najít: Styl S - hnědý

Petr Doseděl - eStránky.cz 20. 6. 2013 15:47

Re: Styl S - hnědý

Dobrý den,
pravděpodobně je to kvůli tomu, že máte aktivovaný program "Zdarma". Tuto šablonu můžete najít v záložce "Placené" v přehledu šablon a případně si ji dokoupit pomocí SMS.

S přátelským pozdravem Petr Doseděl

Colos 6. 8. 2013 18:42

Re: Re: Styl S - hnědý

Mám nekomerční program.
Potřeboval bych jen vědět kterou část kódu mám změnit.

Petr Doseděl - eStránky.cz 8. 8. 2013 13:48

Re: Re: Re: Styl S - hnědý

Napište nám prosím co konkrétně chcete změnit, případně na jakých stránkách nebo ve které šabloně.