Obrázky na pozadí tela Hotovo ľahko
Príjemnou vlastnosťou, ktorú nájdete na mnohých weboch, je to, že sa zdá, že stredová oblasť obsahu prekrýva stránku s vrhaným tieňom. Je to vlastne pomerne jednoduchá metóda na to, aby váš blog vyzeral pekne (alebo na iných webových stránkach) pomocou jediného obrázka na pozadí.
Ako sa to robí?
- Zistite, aký široký je váš obsah. Príklad: 750px.
- Vytvorte obrázok vo svojej ilustračnej aplikácii (používam Illustrator) širší ako oblasť obsahu. Príklad: 800px.
- Nastavte pozadie obrázka na pozadie, ktoré chcete mať na každej strane blogu.
- Pridajte bielu oblasť na pozadí.
- Na bielu oblasť naneste tieň, ktorý sa vytláča z ktorejkoľvek strany oblasti.
- Nastavte oblasť orezania na šírku o 1 pixel na výšku. Vďaka tomu bude obrázok na stiahnutie pekný a kompaktný na rýchle vykreslenie.
- Výstup obrázka.
Tu je príklad, ako som to zostrojil pomocou Illustratoru (všimnite si, že mám oblasť plodín oveľa vyššiu ... to je len preto, aby ste videli, čo robím):
Tu je príklad toho, ako by výstup vyzeral s obrázkom na pozadí:
Tu je príklad, ako použiť obrázok pomocou značky vášho štýlu tela vo vašom
CSS súbor.pozadie: # B2B2B2 url ('images / bg.gif') centrum opakovania;
Tu je pitva značky štýlu pozadia:
- # B2B2B2 - nastavuje celkovú farbu pozadia stránky. V tomto príklade je šedá tak, aby zodpovedala šedej farbe na pozadí.
- url ('images / bg.gif') - nastaví obrázok na pozadí, ktorý chcete použiť.
- repeat-y - nastaví opakovanie obrázka na osi y. Obrázok na pozadí sa teda bude opakovať zhora nadol na stránke.
- stred - nastaví obrázok do stredu stránky.
Pekné a ľahké ... jeden obrázok, jedna značka štýlu!