Liggaam agtergrond beelde maklik gedoen

html

'N Goeie kenmerk wat u op baie webwerwe sal vind, is waar die inhoudsarea in die middel lyk asof die bladsy bedek word met 'n drukskadu daaragter. Dit is eintlik 'n redelike eenvoudige metode om u blog mooi te laat lyk (of 'n ander webwerf) met 'n enkele agtergrondfoto.

Hoe word dit gedoen?

  1. Ontdek hoe breed u inhoud is. Voorbeeld: 750px.
  2. Bou 'n prentjie in u illustrasie-toepassing (ek gebruik Illustrator) wyer as die inhoudsarea. Voorbeeld: 800px.
  3. Stel die agtergrond van die prent op die agtergrond wat u aan elke kant van die blog wil hê.
  4. Voeg 'n wit streek op die agtergrond by.
  5. Wend 'n skaduwee aan op die wit streek wat aan weerskante van die streek uitdruk.
  6. Stel die gewasoppervlakte die breedte met 1 pixel in hoogte. Dit sal die aflaai van die prentjie mooi en kompak maak vir vinnige weergawe.
  7. Voer die beeld uit.

Hier is hoe ek dit met Illustrator gebou het (let op dat ek die gewasoppervlak baie groter is ... dit is net sodat u kan sien wat ek doen):
Agtergrond met Illustrator

Hier is 'n voorbeeld van hoe die uitvoer met die agtergrondbeeld sou lyk:
Voorbeeld van agtergrondprent

Hier is hoe u die beeld kan toepas met behulp van u liggaamstylplaatjie in u CSS lêer.

agtergrond: # B2B2B2 url ('images / bg.gif') herhalingsentrum;

Hier is 'n disseksie van die agtergrondstylplaatjie:

  • # B2B2B2 - stel die algehele agtergrondkleur van die bladsy in. In hierdie voorbeeld is dit grys om die grys op die agtergrondprent te pas.
  • url ('images / bg.gif') - stel die agtergrondprent in wat u wil gebruik.
  • herhaal-y - stel die beeld in om op die y-as te herhaal. Die agtergrondbeeld sal dus van bo tot onder op die bladsy herhaal word.
  • middel - stel die prentjie in die middel van die bladsy.

Mooi en maklik ... een prentjie, een stylkaartjie!

2 Comments

  1. 1
  2. 2

Wat dink jy?

Hierdie webwerf gebruik Akismet om spam te verminder. Leer hoe jou opmerking verwerk is.