Lichaamsachtergrondafbeeldingen gemakkelijk gedaan

html

Een leuke functie die je op veel sites zult vinden, is dat het middelste inhoudsgebied de pagina lijkt te bedekken met een slagschaduw erachter. Het is eigenlijk een vrij eenvoudige methode om je blog er leuk uit te laten zien (of een andere website) met een enkele achtergrondafbeelding.

Hoe is het gedaan?

  1. Zoek uit hoe breed uw inhoud is. Voorbeeld: 750px.
  2. Bouw een afbeelding in uw illustratietoepassing (ik gebruik Illustrator) die breder is dan het inhoudsgebied. Voorbeeld: 800px.
  3. Stel de achtergrond van de afbeelding in op de achtergrond die u aan elke kant van de blog wilt hebben.
  4. Voeg een wit gebied toe over de achtergrond.
  5. Breng een schaduw aan op het witte gebied dat aan weerszijden van het gebied uitsteekt.
  6. Stel het bijsnijdgebied in op de breedte met 1 pixel in hoogte. Hierdoor wordt de te downloaden afbeelding mooi en compact voor snelle weergave.
  7. Voer de afbeelding uit.

Hier is hoe ik het heb geconstrueerd met Illustrator (merk op dat ik het bijsnijdgebied veel groter heb ... dat is gewoon zodat je kunt zien wat ik aan het doen ben):
Achtergrond met Illustrator

Hier is een voorbeeld van hoe de uitvoer eruit zou zien met de achtergrondafbeelding:
Voorbeeld van achtergrondafbeelding

Zo past u de afbeelding toe met uw bodystyle-tag in uw CSS bestand.

achtergrond: # B2B2B2 url ('images / bg.gif') herhaal-y centrum;

Hier is een dissectie van de achtergrondstijltag:

  • #B2B2B2 – stelt de algemene achtergrondkleur van de pagina in. In dit voorbeeld is het grijs om overeen te komen met het grijs op de achtergrondafbeelding.
  • url('images/bg.gif') – stelt de achtergrondafbeelding in die u wilt gebruiken.
  • herhaal-y - stelt de afbeelding in om te herhalen op de y-as. De achtergrondafbeelding wordt dus van boven naar beneden op de pagina herhaald.
  • midden - plaatst de afbeelding in het midden van de pagina.

Leuk en gemakkelijk ... één afbeelding, één stijltag!

2 reacties

  1. 1
  2. 2

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.