Obrázky na pozadí těla Hotovo snadno

html

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

  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.

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):
Pozadí s Illustratorem

Zde je příklad toho, jak by výstup vypadal s obrázkem na pozadí:
Příklad obrázku 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!

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.