Vložení obrázku na pozadí stránky
Tento návod nám pomůže s vložením fotografie na pozadí našich stránek. Je důležité uvědomit si, že některé vzhledové šablony jsou pro tento úkon vhodnější než jiné. V tomto příkladu budeme pracovat se vzhledem 157i u kterého je vložení obrázku na pozadí poměrně snadné.
Na začátku vstoupíme na záložku Vzhled a zvolíme výše zmíněný 157i, na své stránce se poté přesvědčíme o výsledku (Obnovit, CTRL+R nebo F5).
Na začátku vstoupíme na záložku Vzhled a zvolíme výše zmíněný 157i, na své stránce se poté přesvědčíme o výsledku (Obnovit, CTRL+R nebo F5).
Následně vstoupíme zpět do administrace, klikneme na Editace CSS a nahrajeme obrázek, který chceme vložit na pozadí našich stránek.
TIP: Obrázek by měl mít velikost minimálně 1920px x 1080px., což je běžná velikost Full HD monitorů. Problém takového obrázku ale může být datová velikost. Je dobré s tvorbou obrázku a jeho formátem experimentovat. Geometrické obrazce uložené ve formátu .PNG mohou mít datovou velikost snesitelnou i při Full HD. Datová velikost by neměla přesáhnout 500kB. I taková velikost je pro pomalejší připojení víc než dost, obrázek se ale stahuje pouze jednou a lze předpokládat, že s postupnou modernizací připojení domácností to již nebude takovou překážkou.
Jakmile je obrázek nahrán, zkopírujeme jeho url adresu a vložíme ji na příslušné místo v css kódu. U definice .body> .i nahradíme existující hodnotu background-image. Důležité je omylem nezměnit ostatní definice. Kód poté uložíme.
Na stránce se poté přesvědčíme o výsledku.
Jelikož se černé písmo stalo na tmavém pozadí špatně čitelné, změníme jeho barvu na bílou. Vrátíme se tedy do administrace a opět u selektoru .body > .i změníme tentokrát hodnotu color z rgb(0,0,0) na color: rgb(255,255,255); Opět si dáme pozor, abychom zachovali formát kódu. Změny uložíme.
Na stránce se opět přesvědčíme o výsledku.
Pro náročné: Pokud nechceme, aby se nám pozadí opakovalo na větších monitorech, do css kódu přidáme ještě atribut s hodnotou background-repeat: no-repeat; a hned pod něj atribut background-position: center;
Pro nejnáročnější: Automaticky je nastaveno, že se obrázek nepohybuje se stránkou. Jinými slovy, pokud scrollujeme stránkou směrem dolů, obrázek na pozadí opticky postupně zalézá pod horní hranu prohlížeče (případně monitoru). Pokud tomuto efektu chceme zabránit, a naopak si přejeme, aby obrázek na pozadí zůstal stále na stejném místě bez ohledu na scrollování stránky, vložíme do kódu ještě kód background-attachment: fixed;
