Kropsbaggrundsbilleder udføres let

En god funktion, du finder på mange websteder, er, hvor centerindholdsområdet ser ud til at ligge på siden med en skygge bagved. Det er faktisk en ret simpel metode til at få din blog til at se flot ud (eller et andet websted) med et enkelt baggrundsbillede.

Hvordan gøres det?

1. Find ud af, hvor bredt dit indhold er. Eksempel: 750 px.
2. Byg et billede i din illustrationsapplikation (jeg bruger Illustrator) bredere end indholdsområdet. Eksempel: 800 px.
3. Indstil baggrunden for billedet til den baggrund, du ønsker at have på hver side af bloggen.
4. Tilføj et hvidt område over baggrunden.
5. Påfør en skygge på det hvide område, der ekstruderer fra begge sider af regionen.
6. Indstil afgrødeområdet bredden med 1 pixel i højden. Dette gør billedet til at downloade pænt og kompakt til hurtig gengivelse.
7. Output billedet.

Sådan konstruerede jeg det ved hjælp af Illustrator (bemærk at jeg har afgrødeområdet meget højere ... det er bare så du kan se hvad jeg laver):

Her er et eksempel på, hvordan output ville se ud med baggrundsbilledet:

Sådan anvender du billedet ved hjælp af dit kropstil-tag i din CSS fil.

baggrund: # B2B2B2 url ('images / bg.gif') gentagelsescenter;

Her er en dissektion af baggrundstypemærket:

• # B2B2B2 - indstiller den generelle baggrundsfarve på siden. I dette eksempel er det gråt for at matche det grå på baggrundsbilledet.
• url ('images / bg.gif') - indstiller det baggrundsbillede, du vil bruge.
• gentag-y - indstiller billedet til at gentage på y-aksen. Så baggrundsbilledet gentages fra toppen til bunden af ​​siden.
• center - indstiller billedet i midten af ​​siden.

Dejligt og nemt ... ét billede, et stilmærke!