0 Kč bez DPH

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í:

  1. jednolitá barva pozadí
  2. barevný přechod tzv. gradient
    - kombinuje obrázek a barvu pozadí
  3. 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.

(obrázek pozadí STAHUJTE ZDE)

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