Myndir af bakgrunni líkamans Auðveldlega

HTML

A ágætur eiginleiki sem þú munt finna á mörgum stöðum er þar sem innihaldssvæði miðju virðist liggja yfir síðunni með dropaskugga á bak við það. Það er í raun nokkuð einföld aðferð til að láta bloggið þitt líta vel út (eða aðra vefsíðu) með einni bakgrunnsmynd.

Hvernig er það gert?

  1. Finndu út hversu breitt innihald þitt er. Dæmi: 750px.
  2. Búðu til mynd í myndforritinu þínu (ég nota Illustrator) breiðari en innihaldssvæðið. Dæmi: 800px.
  3. Stilltu bakgrunn myndarinnar á bakgrunninn sem þú vilt hafa á hvorri hlið bloggsins.
  4. Bættu við hvítu svæði yfir bakgrunninn.
  5. Settu skugga á hvíta svæðið sem þrýstist út frá hvorri hlið svæðisins.
  6. Stilltu uppskerusvæðið breiddina um 1 punkta á hæð. Þetta mun gera myndina til að hlaða niður fallega og þétta til að skjóta fljótt.
  7. Skila myndinni.

Hér er hvernig ég smíðaði það með Illustrator (athugaðu að ég er með uppskerusvæðið miklu hærra ... það er bara svo þú getir séð hvað ég er að gera):
Bakgrunnur með Illustrator

Hér er dæmi um hvernig framleiðslan myndi líta út með bakgrunnsmyndinni:
Dæmi um bakgrunnsmynd

Hér er hvernig á að beita myndinni með því að nota líkamsstílmerkið þitt í CSS skrá.

bakgrunnur: # B2B2B2 url ('images / bg.gif') repeat-y center;

Hér er krufning á bakgrunnsstílmerki:

  • # B2B2B2 - stillir heildar bakgrunnslit síðunnar. Í þessu dæmi er það grátt til að passa við grátt á bakgrunnsmyndinni.
  • url ('images / bg.gif') - stillir bakgrunnsmyndina sem þú vilt nota.
  • endurtaka-y - stillir myndina til að endurtaka á y-ásinn. Þannig að bakgrunnsmyndin mun endurtaka sig efst og neðst á síðunni.
  • miðja - stillir myndina í miðju síðunnar.

Flott og auðvelt ... ein mynd, eitt stílmerki!

2 Comments

  1. 1
  2. 2

Hvað finnst þér?

Þessi síða notar Akismet til að draga úr ruslpósti. Lærðu hvernig ummæli þín eru unnin.