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ářů
bílé pozadí v šabloně electra
30. 9. 2012 14:04:01 | Josef
Dobrý den,
mám předlohu electra, chtěl jsem v ní vytvořit čistě bílé pozadí, ale nedaří se mi to. Zatím se mi podařilo vytvořit pouze bílé postranice. Pokud mohu poprosit o pomoc, budu rád. Můj web je www.joseftrakal.cz
Odpovědět
RE: čistá stránka
20. 9. 2012 10:45:32 | Hana Medková
Dobrý den, čistá stránka je stránka bílá - jednobarevná, tu nastavíte dle příkladu uvedeného na začátku návodu. Na pozadí stránek lze samozřejmě umístit i flash, ale obávám se, že velikost souboru flash na pozadí stránek bude natolik velká, že bude brzdit rychlost načítání Vašich stránek. Rychlost načítání webu je jedním z mnoha faktorů, které vyhledávací roboti posuzují - čím pomaleji se Vaše stránky načítají, tím menší váhu jim vyhledávače přikládají a i tato drobnost může mít neblahý vliv na výsledky vyhledávání.
V každém případě však flash pozadí do inPage vložit nelze - max. animovaný .gif obrázek opakující se na pozadí.
Odpovědět
čistá stránka
19. 9. 2012 17:02:37 | Miroslav
Dobrý den,
Chci se zeptat, zdali je možne udělat čistou stránku bez předloh.Prostě čistá bíla stránka na kterou umístím svou stránku ve flashi.
Děkuji za odpověd.
Odpovědět
problém
17. 6. 2012 12:51:40 | Veronika
Tak už jsem na to přišla, kde dělám chybu. I tak děkuji.
Odpovědět
problém
16. 6. 2012 22:57:20 | Veronika
Dobrý den,
zaktéž jako většina kolegů dělám asi někde chybu. Jdu krok z krokem, ale stejně to nefunguje. Mohu poprosit o radu, co dělám špatně? Děkuji moc Veronika (web: kubistav.cz)
Odpovědět
RE: zmena pozadi
13. 6. 2012 13:18:37 | Hana Medkova
je potřeba nastavit základní šablonu na které chcete pozadí změnit. Na vašich stránkách v tuto chvíli máte šablonu MIRA s oranžovým pozadím. Je tedy potřba ještě něco měnit?
Odpovědět
pozadí webovek
12. 6. 2012 16:18:55 | Věrka
Jé, tak to bych byla moc ráda, klidně to můžete udělat sami, vůbec mi to vadit nebude, ba naopak, měnit to již nechci.... moje stránky jsou www.saarloosuvvlcak.cz
Mom moc vám děkuji, prosím o pozadí v oranžové barvě
Odpovědět
RE: pozadí pro web
12. 6. 2012 15:10:27 | Hana Medkova
Dobrý den paní Věrko, rádi Vám poradíme kde nebo v čem je chyba při nastavování pozadí na vašich stránkách nebo vám s tím přímo pomůžeme. Potřebujeme však znát název vaší domény.
Odpovědět
pozadí webovek
12. 6. 2012 13:04:51 | Věrka
Přeji moc pěkný den,
ať se snažím jak se snažím, snad dodržuji i všechny instrukce k nahrání obrázku, ale vůbec mi to nejde, nahrát ano, ale aby se to zobrazilo i na stránkách - to nikoli. Asi na tohle nejdem dost chytrá. Můžete mi s tím - klidně i za úplatu pomoci? Moc předem děkuji
Odpovědět
Poděkování
31. 5. 2012 15:12:54 | Majka Musichová
Dnes jsem s překvapením zjistila,že požadovamé pozadí stránky je již v pořádku.Děkuji za váš zásah.Přece jen něco nebylo v pořádku v tom zadaní.Ještě jednou díky za vaší pomoc.Majka
Odpovědět
Re: dotaz (pro Majku)
28. 5. 2012 15:24:20 | Hana Medkova
Dobrý den, na základě vašeho dotazu jsem pro Vás připravila návod jak vkládat .gif obrázky do stránek v inPage. Návod zatím není zveřejněn, ale můžete si jej pročíst zde:
http://www.blog.inpage.cz/inpage/jak-vlozit-animovany-gif-obrazek-do-stranky/
Odpovědět
dotaz
26. 5. 2012 13:44:27 | majka
Nemohu vložit a opakovat obrázek gif do pozadí.Stáhnu obrázek do nezařazených obrázků jako "pozadí".Když ho vložím do stránky jako vložit obrázek tak to funguje.Když chci tentýž obrázek vložit do pozadí a opakovat,tak to nejde. Musí být v adrese url("/obrazek/3/ pozadi"), obrazek/3 a co to znamená. Nestacila by adresa url("pozadi")?. Nechybí ve vašem zápisu tohoto vzorečku jedna { závorka?.Kde dělám chybu?Majka
Odpovědět
RE: adresa obrázku
10. 1. 2012 14:48:10 | Hana Medková
Dobrý den, změnit pozadí můžete u kteréhokoliv programu inPage, tedy i u verze MINI. Pravděpobodně někde děláte chybu. Pokud nám zašlete název domény, podíváme se na to a poradíme Vám.
Odpovědět
adresa obrázku
5. 1. 2012 0:54:40 | Bára
Dobrý večer,
snažím se vložit vlastní pozadí (dle vašich pokynů) na své stránky. Ale nějak se mi to nedaří, je toto možné u balíčku inPage Mini? Díky za odpověď Bára
Odpovědět