Kroppsbakgrunnsbilder gjøres enkelt

html

En fin funksjon du finner på mange nettsteder, er hvor senterets innholdsområde ser ut til å legge siden med en skygge bak. Det er faktisk en ganske enkel metode for å få bloggen din til å se fin ut (eller et annet nettsted) med et enkelt bakgrunnsbilde.

Hvordan gjøres det?

  1. Finn ut hvor bredt innholdet ditt er. Eksempel: 750 px.
  2. Bygg et bilde i illustrasjonsprogrammet (jeg bruker Illustrator) som er bredere enn innholdsområdet. Eksempel: 800 px.
  3. Sett bakgrunnen til bildet til bakgrunnen du ønsker å ha på hver side av bloggen.
  4. Legg til en hvit region over bakgrunnen.
  5. Påfør en skygge på den hvite regionen som ekstruderer fra hver side av regionen.
  6. Angi beskjæringsområdet bredden med 1 piksel i høyden. Dette vil gjøre at bildet kan lastes ned pent og kompakt for rask gjengivelse.
  7. Skriv ut bildet.

Slik konstruerte jeg det ved hjelp av Illustrator (merk at jeg har beskjæringsområdet mye høyere ... det er bare slik at du kan se hva jeg gjør):
Bakgrunn med Illustrator

Her er et eksempel på hvordan utdataene vil se ut med bakgrunnsbildet:
Eksempel på bakgrunnsbilde

Slik bruker du bildet ved å bruke kroppsstilkoden din i CSS filen.

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

Her er en disseksjon av bakgrunnsstilkoden:

  • # B2B2B2 - angir den generelle bakgrunnsfargen på siden. I dette eksemplet er det grått for å matche det grå på bakgrunnsbildet.
  • url ('images / bg.gif') - angir bakgrunnsbildet du vil bruke.
  • repeat-y - angir at bildet skal repeteres på y-aksen. Så bakgrunnsbildet gjentas fra toppen til bunnen av siden.
  • center - setter bildet midt på siden.

Fin og enkel ... ett bilde, en stilkode!

2 Kommentarer

  1. 1
  2. 2

Hva tror du?

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.