Kroppsbakgrundsbilder gjort enkelt

HTML

En trevlig funktion som du hittar på många webbplatser är där mittinnehållsområdet verkar överlagra sidan med en skugga bakom sig. Det är faktiskt en ganska enkel metod för att få din blogg att se fin ut (eller annan webbplats) med en enda bakgrundsbild.

Hur är det gjort?

  1. Ta reda på hur brett ditt innehåll är. Exempel: 750 pixlar.
  2. Bygg en bild i din illustrationsapplikation (jag använder Illustrator) som är bredare än innehållsområdet. Exempel: 800 pixlar.
  3. Ställ in bakgrunden på bilden till den bakgrund du vill ha på varje sida av bloggen.
  4. Lägg till en vit region över bakgrunden.
  5. Applicera en skugga på det vita området som sträcker sig från vardera sidan av regionen.
  6. Ställ in beskärningsområdet med en pixel på höjden. Detta gör att bilden kan laddas ner snygg och kompakt för snabb rendering.
  7. Mata ut bilden.

Så här konstruerade jag det med Illustrator (notera att jag har beskärningsområdet mycket högre ... det är bara så att du kan se vad jag gör):
Bakgrund med Illustrator

Här är ett exempel på hur utmatningen skulle se ut med bakgrundsbilden:
Exempel på bakgrundsbild

Så här applicerar du bilden med din kroppsstils -tagg i din CSS fil.

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

Här är en dissektion av bakgrundsstilstaggen:

  • #B2B2B2 - anger den övergripande bakgrundsfärgen på sidan. I det här exemplet är det grått att matcha det gråa på bakgrundsbilden.
  • url ('images/bg.gif') - anger den bakgrundsbild som du vill använda.
  • repetera-y - ställer in bilden så att den upprepas på y-axeln. Så bakgrundsbilden upprepas från toppen till botten av sidan.
  • center - ställer in bilden i mitten av sidan.

Snyggt och enkelt ... en bild, en stiltagg!

2 Kommentarer

  1. 1
  2. 2

Vad tror du?

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.