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).
1.png
2.png
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.
obr1.png
3.png
obr.dva.png
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.
obr2.png
obr3.png
Na stránce se poté přesvědčíme o výsledku.
obr4.png
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.
obr5.png
Na stránce se opět přesvědčíme o výsledku.
obr6.png
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;
obr7.png
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;
obr8.png
01.07.2016 16:02:16
Redakce
Name
Email
Comment
Or visit this link or this one