Obrázky na pozadí těla Hotovo snadno
Pěknou funkcí, kterou najdete na mnoha webech, je místo, kde se zdá, že středová oblast obsahu překrývá stránku a za ní je stín. Je to vlastně docela jednoduchá metoda, jak udělat blog hezký (nebo jiný web) pomocí jediného obrázku na pozadí.
Jak se to dělá?
- Zjistěte, jak široký je váš obsah. Příklad: 750px.
- Vytvořte obrázek ve své ilustrační aplikaci (používám Illustrator) širší než oblast obsahu. Příklad: 800px.
- Nastavte pozadí obrázku na pozadí, které chcete mít na každé straně blogu.
- Přidejte bílou oblast přes pozadí.
- Aplikujte stín na bílou oblast, která se vysunuje z obou stran oblasti.
- Nastavte oblast oříznutí na šířku o 1 pixel na výšku. Díky tomu bude obrázek ke stažení pěkný a kompaktní pro rychlé vykreslení.
- Výstup obrazu.
Zde je návod, jak jsem to zkonstruoval pomocí Illustratoru (všimněte si, že mám oblast oříznutí mnohem vyšší ... to jen abyste viděli, co dělám):
Zde je příklad toho, jak by výstup vypadal s obrázkem na pozadí:
Zde je návod, jak použít obrázek pomocí značky vašeho stylu těla ve vašem
CSS soubor.pozadí: # B2B2B2 url ('images / bg.gif') centrum opakování;
Zde je rozbor značky stylu pozadí:
- #B2B2B2 - nastavuje celkovou barvu pozadí stránky. V tomto případě je šedá, aby odpovídala šedé na obrázku na pozadí.
- url ('images/bg.gif') - nastaví obrázek na pozadí, který chcete použít.
- repeat-y - nastaví opakování obrazu na ose y. Obrázek na pozadí se tedy bude opakovat od horní do dolní části stránky.
- uprostřed - nastaví obrázek do středu stránky.
Pěkné a snadné ... jeden obrázek, jedna značka stylu!