Obrázky na pozadí těla Hotovo snadno

html

Pěknou funkcí, kterou najdete na mnoha webech, je místo, kde se zdá, že oblast obsahu středu překrývá stránku s vrženým stínem. Ve skutečnosti je to docela jednoduchá metoda, díky které váš blog vypadá hezky (nebo jiný web) pomocí jediného obrázku na pozadí.

Jak se to dělá?

  1. Zjistěte, jak široký je váš obsah. Příklad: 750px.
  2. Vytvořte obrázek ve své ilustrační aplikaci (používám Illustrator) širší než oblast obsahu. Příklad: 800px.
  3. Nastavte pozadí obrázku na pozadí, které chcete mít na každé straně blogu.
  4. Přidejte bílou oblast přes pozadí.
  5. Aplikujte stín na bílou oblast, která se vysunuje z obou stran oblasti.
  6. 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í.
  7. Výstup obrazu.

Tady je způsob, jak jsem to zkonstruoval pomocí Illustratoru (všimněte si, že mám oříznutou oblast mnohem vyšší ... to je jen proto, abyste viděli, co dělám):
Pozadí s Illustratorem

Zde je příklad toho, jak by výstup vypadal s obrázkem na pozadí:
Příklad obrázku na pozadí

Tady je postup, jak použít obrázek pomocí značky stylu těla v souboru CSS soubor.

pozadí: # B2B2B2 url ('images / bg.gif') centrum opakování;

Zde je pitva značky stylu pozadí:

  • # B2B2B2 - nastaví celkovou barvu pozadí stránky. V tomto příkladu je šedá, aby odpovídala šedé barvě 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!

2 Komentáře

  1. 1
  2. 2

Co si myslíte?

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.