Obrázky na pozadí tela Hotovo ľahko

html

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

  1. Zistite, aký široký je váš obsah. Príklad: 750px.
  2. Vytvorte obrázok vo svojej ilustračnej aplikácii (používam Illustrator) širší ako oblasť obsahu. Príklad: 800px.
  3. Nastavte pozadie obrázka na pozadie, ktoré chcete mať na každej strane blogu.
  4. Pridajte bielu oblasť na pozadí.
  5. Na bielu oblasť naneste tieň, ktorý sa vytláča z ktorejkoľvek strany oblasti.
  6. 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.
  7. 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):
Pozadie s Illustratorom

Tu je príklad toho, ako by výstup vyzeral s obrázkom na pozadí:
Príklad obrázka 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!

2 Komentáre

  1. 1
  2. 2

Čo si myslíte?

Táto stránka používa Akismet na zníženie spamu. Zistite, ako sa spracúvajú údaje vašich komentárov.