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

Colos 11. 8. 2013 23:35

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

Styl S - hnědý
Vložení obrázku na pozadí celé stránky.

Petr Doseděl - eStránky.cz 12. 8. 2013 10:17

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

V této šabloně to není úplně jednoduché.

Horní část můžete změnit úpravou odkazu k obrázku v prvku #topBkg v css souboru (řádek background: url(...);)

Pokud chcete přidat obrázek do obsahové části, najděte si prvek #whole-page, kde k řádku background, kde je pouze barva přidejte před středník "url(cesta_k_obrazku)" - bez uvozovek.

Problém může nastat u různě barevných obrázků, kdy nepůjde přečíst text. Pak by bylo potřeba podbarvit všechny obsahové bloky.

Colos 13. 8. 2013 8:29

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

Změna obsahové části se mi povedla ale ještě bych potřeboval vědět parametr aby se mi obrázek při posunu směrem dolů neopakoval ale držel stálou pozici.

Kateřina Dvořáková 12. 8. 2013 9:38

Pruh nahoře i dole

Dobrý den, máme stránky masazesveceri.cz Nahoře u designu máme šedivý pruh, dole pod stránkou je taky. Můžete nám poradit jak ho nahradit tím obrázkem co tam je? Předem díky

Petr Doseděl - eStránky.cz 12. 8. 2013 10:21

Re: Pruh nahoře i dole

Dobrý den,
horní pruh odstraníte smazáním řádku "background" u #document v css.

Spodní pruh je pozadí patičky, kde je i grafika zakončující obsahovou část. Změnu můžete provést v css u #footer - opět v řádku "background".

Milan 21. 6. 2013 12:14

Nemůžu to najít u stylu H

Dobrý den, můžete prosím poradit, jaký je to kód u stylu H?
Zkoušel jsem nahradit tuto část:
background: #000 url('<!--/ logo_url /-->') 50% 50% no-repeat; Smazáním obsahu v závorce a nahrazením url mého obrázku
a po uložení se nic neděje.
Prosím o radu.

Petr Doseděl - eStránky.cz 21. 6. 2013 14:39

Re: Nemůžu to najít u stylu H

Dobrý den,
bude Vás zajímat kód:
html, body {
color: #7f675c;
background: #17100c url(<!--/ img_root /-->bg_body.png) repeat-x;
}

Označení barvy #17100 může být odlišné u jiných barevných kombinací.

Část kódu, který jste upravoval upravuje místo s hlavičkou a nadpisem stránek.

... Podařilo se? :)

Milan 21. 6. 2013 19:04

Re: Re: Nemůžu to najít u stylu H

Jo funguje, děkuji moc :-)

A. Dlouhá 6. 5. 2013 10:45

dotaz

Dobrý den,
měla bych prosím dotaz, zda je možné vložit obrázek na pozadí tak, aby původní pozadí zůstalo a obrázek se zobrazoval na něm? Zkoušela jsem, ale nepodařilo se.
Děkuji Dlouhá

Petr Doseděl - eStránky.cz 6. 5. 2013 10:51

Re: dotaz

Dobrý den,
možné to určitě je, ale není to zrovna jednoduchá záležitost. Zapíšeme si to k námětům na další tutoriály - je možné, že si podobný návod časem přečtete.

S přátelským pozdravem Petr Doseděl - eStránky.cz

Dominika P. 21. 4. 2013 21:26

chyba

Podle obtížnosti by to mělo být jednoduché, přesto se mi to ani po opakovaných pokusech nepodařilo:( Postup jsem se snažila dodržet, přesto bez úspěchu.

Petr Doseděl - eStránky.cz 22. 4. 2013 9:39

Re: chyba

Můžete mi prosím napsat, kde jste se zasekla nebo co se konkrétně nepovedlo? Případně můžete přiložit i odkaz na stránky, kde chcete úpravu provádět.

Děkuji, Petr Doseděl - eStránky.cz