Jak změnit pozadí webových stránek
Uvažovali jste někdy o změně pozadí webových stránek a nevěděli jste jak na to?
Přinášíme vám jednoduchý návod, jak si můžete pozadí stránek změnit s pomocí kaskádových CSS stylů. Do pozadí stránek tak můžete nastavit např. vlastní barvu, barevný přechod nebo třeba umístit vlastní obrázek.
Pod pojmem pozadí stránek se obvykle rozumí:
- jednolitá barva pozadí
- barevný přechod tzv. gradient
- kombinuje obrázek a barvu pozadí - opakující se obrázek na pozadí
- týká se šablon v inPage
Pozadí stránek v inPage
Pozadí stránek u šablon MIRA, ATLAS, VEGA, ZETA, POLARIS a NAVI se skládá z kombinace obrázku a barvy pozadí:
- horní část pozadí tvoří OBRÁZEK
- spodní část pozadí tvoří BARVA, která na obrázek navazuje
Výjimkou je šablona s názvem MEDIA, u které tvoří pozadí jednolitá barva.
Změna pozadí pomocí CSS
Změna pozadí se zapisuje buď pomocí zápisu background-color: nebo background: do vlastního CSS stylu (sekce VZHLED - Vlastní CSS styl), rozdíly jsou v tom, že první zápis umožnuje zapsat jen barvu a už ne obrázek, druhý umožňuje zapsat obrázek, opakování, souřadnice a barvu.
Při vkládání zápisu do vlastního CSS stylu nezapomeňte zaškrtnout volbu "Nastavit styl jako aktivní"
Jak změnit pozadí www stránek si postupně ukážeme na jednotlivých příkladech.
1. Jednolitá barva pozadí
Chcete-li jednoduše změnit barvu pozadí vašich stránek např. na zelenou, vložte níže uvedený zápis do vlastního CSS stylu. Barvu lze definovat buď v hexadecimálním kódu (viz příklad 1) nebo zadáním názvu barvy v anglickém jazyce (viz příklad 2)
Zápis platí pro všechny šablony
Příklad 1: body { background-color: #008000; }
Příklad 2: body { background-color: green; }
Lze použít také zápis
Příklad 1: body { background: #008000; }
Příklad 2: body { background: green; }
Atribut "background-color" v tomto případě umožnuje zapsat jen barvu.
Atribut "background:" umožnuje zapsat obrázek, opakování, souřadnice i barvu.
Výslednou změnu pozadí můžete porovnat na obrázku.
2. Barevný přechod (gradient)
Barevným přechodem (tzv. gradientem) nazýváme pozadí stránek přecházející plynule z jedné barvy do druhé. Představte si např. tmavě šedé pozadí přecházející postupně do světle šedé. Nastavení pozadí tzv. gradientu se tvoří kombinací obrázku s vytvořeným gradientem a barvy pozadí, která by měla navazovat na spodní barvu obrázku. Vysvětlíme na příkladu:
Vytvoření obrázku s gradientem
V programu na tvorbu a úpravu obrázků (doporučujeme např. program Zoner Photo Studio) si lze vytvořit obrázek s barevným gradientem.
(pro názorný příklad je velikost námi vytvořeného obrázku s gradientem je 512x512 pixelů, ve skutečnosti však stačí, když bude rozměr obrázku na šířku pouhý 1pixel)
Vytvořený obrázek následně nahrajte do inPage do sekce OBRÁZKY, obrázek pojmenujte např. jako "pozadí". Jakmile jste obrázek do administrace nahráli, můžete změnit pozadí stránek pomocí CSS.
Definice pozadí v CSS stylech
Vložte následující zápis do vlastního CSS stylu (sekce VZHLED - Vlastní CSS styl)
Zápis platí pro všechny šablony
body { background: url("/obrazek/3/pozadi") repeat-x 0 0 #F2F2F2; }
Zápis "url" je povinný, pokud pracujete s obrázkem -> vyznačuje cestu k originálu obrázku. Zápis repeat-x způsobuje opakování obrázku na pozadí v horizontální poloze. Zápis #F2F2F2 určuje barvu pozadí, navazující na spodní barvu obrázku (v našem případě je to světle šedá barva).
Atribut "background:" umožnuje do pozadí stránek zapsat obrázek, opakování, souřadnice i barvu.
Výslednou změnu pozadí můžete porovnat na obrázku.
3. Opakující se obrázek na pozadí
Obrázek na pozadí je trochu specifická záležitost, ne každý obrázek je vhodný pro pozadí webových stránek.
Vhodné obrázky pro pozadí vašich webových stránek můžete najít třeba na internetu. Abyste v této chvíli nemuseli nic hledat, uložte si do svého PC následující obrázek s pozadím, který vidíte vpravo.
Následně obrázek s pozadím nahrajte do administrace vašeho inPage do sekce OBRÁZKY. Obrázek pojmenujte např. jen jako "Pozadí"
Definice pozadí v CSS stylech
Po nahrátí obrázku s pozadím přejděte k editaci vlastního CSS stylu (sekce VZHLED -> Vlastní CSS styly) a vložte do CSS následující zápis:
Zápis platí pro všechny šablony
body { background: url("/obrazek/3/pozadi") repeat 0 0 #733F03; }
Výsledné zobrazení pozadí stránek může poté vypadat takto:
(ukázka z webu www.SAULESRO.cz - pro zvětšení klikněte na obrázek)
Obrázek na pozadí definujeme pomocí atributu background: url (). Opakování obrázku způsobí zápis repeat - tímto vyskládá prohlížeč celé pozadí opakujícím se obrázkem . Poslední zápis #733F03 značí barvu podkladu pozadí, v našem případě je to tmavě hnědá z obrázku, avšak na místo barvy lze použít i zápis "transparent".
Kromě hodnoty "repeat" lze využít i další hodnoty repeat-x a repeat-y, ty určují zda se má obrázek na pozadí opakovat pouze v ose X (horizontálně) nebo jen v ose Y (vertikálně).
Kde zjistíte adresu obrázku?
Pokud nevíte jak zjistit URL adresu obrázku, kterou potřebujete vložit při změně pozadí do vlastního CSS stylu, zkuste si zapamatovat následující:
V první řadě záleží na tom, jaký používáte jazyk aplikace inPage. Přednastavený jazyk je český, lze jej však přepnout do slovenštiny, němčiny, angličtiny atd. Jazyk aplikace lze změnit v administraci v sekci NASTAVENÍ -> Nastavení prostředí -> Jazyk aplikace.
Používáte inPage v češtině? Pak URL cesta k obrázku bude:
url ("/obrazek/3/adresa-obrazku-jpg")
Používáte inPage ve slovenštině? Pak URL cesta k obrázku bude:
url ("/obrazok/3/adresa-obrazku-jpg")
Používáte inPage v angličtině? Pak URL cesta k obrázku bude:
url ("/picture/3/adresa-obrazku-jpg")
Používáte inPage v němčině? Pak URL cesta k obrázku bude:
url ("/bild/3/adresa-obrazku-jpg")
V druhé řadě potřebujete zjistit samotnou adresu vašeho obrázku: /adresa-obrazku-jpg/. Adresu obrázku zjistíte tak, že si otevřete editaci vašeho obrázku v inPage a na stránce kde nastavujete parametry obrázku, rozkliknete záložku Optimalizace pro vyhledávače a zde adresu najdete (viz obrázek)
Adresa obrázku se zpravidla odvíjí od názvu obrázku, pokud si adresu nedefinujete sami.
Hanka Medková
hana.medkova(zav)zoner.cz
Přidat komentář
Přehled komentářů
KOD NEFUNGUJE
12. 11. 2017 7:09:18 | Jana
Dobrý den,
též se mi nedaří podle tohoto návodu pozadí stránek změnit. Prošla jsem i druhou stránku blogu, kde radíte, jak změnit pozadí - všimla jsem si však, že kody se trochu liší.
Má tedy být kod pro změnu pozadí být:
body { background: url("/obrazek/3/pozadi") repeat 0 0 #733F03; } - jak je uvedeno zde, nebo:
body { background-image: url("/obrazek/3/pozadi-ukazka-png/");} - jak je uvedeno v článku pozadí celého webu?
Nicméně zkoušela jsem oboje verze - neprojevují se na netu. Pokusila jsem se před body vložit i typický znak #:
#body { background-image: url("/obrazek/3/motiv1-jpg") repeat 0 0 transparent; }
ale stále nic.
Děkuji za upřesnění. (jedná se o stránku beowulf.cz, která je ještě stále v rekonstrukci)
JŠ :-)
Odpovědět | Zobrazit odpovědi
Re: KOD NEFUNGUJE
14. 11. 2017 15:24:00 | Tým inPage
Dobrý den,
v pořádku jsou obě varianty. Ve Vašich CSS stylech však byla uvedena kombinace těchto kódů. Správně je:
body { background: url("/obrazek/3/motiv1/") repeat 0 0 white; }
Navíc tam byla drobná chybka v url obrázku (url obrázku bylo pouze motiv1, nikoliv motiv1-jpg).
Znak # se používá pouze v případech, pokud jde o id prvku. Body tedy bude samostatně.
Odpovědět
Změna barvy pozadí
16. 4. 2015 15:55:51 | Jana Drakovac
Dobrý den, nastavila jsem si barvu pozadí na tomato ( #ff6347), fungovala pár dní a dnes ráno barva zmizela.Můžete mi poradit co s tím nebo rovnou nastavit barvu pozadí zpátky.?
Děkuji mnohokrát.
Odpovědět
RE: obrázek
12. 2. 2015 8:02:47 | Ondřej Jonáš
Dobrý den Věrko,
upravil jsem Vám zápis CSS stylu, který jste měla napsaný. Doplnil jsem Vám k němu i poznámku, proč se obrázek nezobrazoval. Pokud budete mít nějaké další dotazy, neváhejte se na nás obrátit na adrese admin@zoner.cz.
Přeji hezký den.
Odpovědět
obrázek
11. 2. 2015 17:59:18 | věrka
dělám vše podle vašeho návodu, ale nedaří se mi, aby na pozadí obrázek byl. Jedná se o stránky www.saarloosuvvlcak.cz Co dělám špatně?
Odpovědět
RE: pozadi sablona vega
3. 2. 2014 12:31:05 | Vladimír Souš
Dobrý den wendy,
toto možné obecně je, záleží však na použité šabloně a jedná se o náročnější řešení vyžadující znalost HTML a CSS kódování. Napište mi název vaší domény na můj email vladimir.sous(zavináč)zoner.cz a uvidíme, co se s tím dá dělat.
Odpovědět
pozadi sablona vega
31. 1. 2014 10:51:58 | wendy
Zdravim, mam dotaz, je mozne v tomto programu mit pro kazdou stranku na webu jiné pozadi/ tedy v definici stylu nastavit vice pozadi? nebo to tento program neumoznuje?pokud ano, prosim o napovedu. Diky.
Odpovědět
RE: Pozadí za textem
6. 8. 2013 7:47:34 | Vladimír Souš
Dobrý den, prosím uvádějte vždy přímo název domény, o jaké stránky se jedná, případně alespoň název šablony. S takto konkrétním dotazem Vám opravdu nemohu odpovědět obecně. Děkuji za pochopení.
Odpovědět
Pozadí za textem
5. 8. 2013 17:31:10 | Levan
Dobrý den, potřeboval bych poradit jak změnit barvu pozadí za textem ve sloupci vlevo a hlavním těle je tam šedá a potřeboval bych bílou. Zkoušel jsem různé kombinace, ale marně.
Děkuji za odpověď.
Odpovědět
RE: změna barvy obsahové části
12. 11. 2012 11:30:16 | Hana Medková
Dobrý den paní Veroniko, ve vašem případě to bude poměrně dost složité. Vřele bych Vám doporučovala zvolit si základní šablonu s vnitřní obsahovou částí již bílou, na místo obarvování té plnobarevné šablony. S tím byste měla spojené další obtíže, obarvit pozadí vnitřku šablony, změnit kompletně definice barev písma, odkazů a formulářů na webu tak aby ladili s bílým pozadím. To je práce na 2 dny, než ten vzhled komplet doladíte.
Opravdu věřte, že bude snažší zvolit šablonu s bílým vnitřkem a jen si doladit pozadí stránek. Budete s tím mít méně komplikací, věřte mi.
Odpovědět
Změna barvy pozadí obsahové části
12. 11. 2012 11:19:33 | Veronika Maříková
Dobrý den, velmi prosím o radu, jak změnit barvu pozadí hlavní obsahové části na bílou (ze současné hnědooranžové), a zároveň, jak mít bílou i základní barvu tlačítek navigace. Dokázala jsem dle Vašich rad změnit barvu tlačítek po najetí myší, ale toto nezvládnu. Moje adresa je zatím www.demo-9516.inpage.cz. Šablona VEGA.
Velmi děkuji, Veronika Maříková
Odpovědět
opakující se video
12. 10. 2012 23:04:11 | Josef
Dobrý den, stejně ještě potřebuji poradit :) ... vadí mi, že to video co mám na hlavní stránce ( web www.joseftrakal.cz ) se neopakuje neustále dokola, ikdyž zaškrtnu nekonečné video, nebo opakování, i při tvorbě v powerpointu a převodu do ispring. Nevím co dělám špatně, ale nemůžu docílit nekonečného opakování.
děkuji za odpověď
Odpovědět
RE: rady
12. 10. 2012 9:25:36 | Hana Medková
Nemáte zač děkovat, ráda jsem Vám pomohla a také jsme rádi, že využíváte pro svou webovou prezentaci právě program inPage.
Opravdu musím uznat, že jsou Vaše stránky moc hezké, příjemné na pohled a pro uživatele přehledné a srozumitelné.
Odpovědět
rady
11. 10. 2012 23:48:25 | Josef
Moc děkuji za rady a odpovědi na mé dotazy a že jich nebylo málo. Pomohla jsme mi vytvořit podobu mých stránek.
Děkuji Trakal
www.joseftrakal.cz
Odpovědět
Motiv + formulář
11. 10. 2012 10:15:09 | Hana Medková
Po odstraneni podkladu motivu vložte do vlastniho CSS stylu tento zápis:
#theme-wrap { background: transparent; }
Zmenu pozadi u formulaře umozni tento zapis:
#form {
background: none repeat scroll 0 0 transparent;
border: 1px dotted;
}
Odpovědět