Soms is het wat lastig om je voor te stellen wat er gebeurt als je een image in de background wilt positioneren. Sinds ik het beeld voor me zag van een patrijspoort-raampje, zal ik het nooit meer vergeten.

Theorie

Als je een "box" (vak met bepaalde eigenschappen) hebt waarin je een achtergrond-figuur wilt plaatsen, kan je je voorstellen dat je door een patrijspoort kijkt.
Je ziet eenvoudig niet die delen van de figuur die niet in de box (het patrijspoort-raampje) passen.
Als we een niet-herhalend plaatje hebben van een zeegezicht, en een vak zo groot als de patrijspoort, zien we alleen de achtergrond in het binnenste van de patrijspoort:

fig. 1

• In feite is het kijkgat naar de achtergrond van een box een rechthoekig ding, maar voor dit voorbeeld maakt dat niet uit.

De basis css voor deze achtergrond is:

 

Na een tijdje zal onze boot met de patrijspoort een stukje verder zijn gevaren. Met gebruik van hetzelfde plaatje willen we nu dit zien:

fig. 2

Gelukkig is het mogelijk de positie van het background-image in te stellen met de eigenschap ... 'background-position'. Dat betekent dat we een bepaalde afstand in de x-y coordinaten (plaatsbepaling horizontaal-verticaal) van de achtergrond-figuur kunnen instellen. Standaard staan de x-y coordinaten ingesteld op 0,0:

fig. 3

Oftewel: de linkerbovenhoek van de box en die van de achtergrond-figuur vallen precies samen. Daarom had de voor fig. 1 gebruikte css ook kunnen zijn:

De achtergrond-positie kan genoteerd worden in vaststaande afstanden zoals in px, maar ook in relatieve afstanden: in een % van de breedte of hoogte van de box. Om de positie van fig. 2 te krijgen, maken we er eenvoudig van:

 

Nu we dit eenmaal weten, kunnen we bijna alles doen met onze achtergrond!

Om de boot aan de rechterkant te zien:

fig. 4

nemen we:

 

Bij een ruwere zee met wat deining zien we soms:

fig. 5

Dan moeten we de achtergrond-figuur met ong. 33px omhoog tillen t.o.v. het nulpunt van de patrijspoort (via een negatieve waarde dus):

Dat is alles - laat nu de fantasie de rest maar doen !

Afgekort

Om je stylesheet wat korter te maken, kan je de afgekorte notatie gebruiken:

Conclusies

Met background-positionering kan je verschillende delen van één image gebruiken.

Dat is niet beperkt tot 1 plaatje. Je kunt ook geheel verschillende plaatjes in één image combineren: met de background-positie kunnen dan de samenstellende delen afzonderlijk getoond worden. Op deze manier kan je kleine plaatjes combineren om het downloaden van je pagina sneller te maken.

Zoals in een voorbeeld hieronder wordt geïllustreerd, is een "dubbel plaatje" makkelijk om een css-hover te maken.

Hmm, ik beloofde mezelf niet over tabellen te praten (die vaak de html ruineren), maar o.k.: dit alles is ook bruikbaar in achtergronden voor tables.

Als je niet alleen een achtergrond-positionering gebruikt maar tegelijkertijd ook een positionering van twee of meer boxen met delen van hetzelfde plaatje, kan je hoeken en randen maken voor vloeibare (liquid) zichzelf aanpassende boxen. Zie artikel: Flexibele ronde hoeken.

Voorbeelden

Als we een patrijspoort-plaatje met doorzichtig middenstuk op de voorgrond plaatsen, zoals dit,

fig. 6

dan krijgt het invoegen van:

als resultaat:

geen gecombineerde illustratie:

transparant voorgrond-image en
echte css-achtergrond !

Hoe kan dat?

Wat er gebeurde is dat zowel het kajuit-plaatje als het achtergrond-plaatje op het punt 0,0 van de box beginnen:

fig. 7

Om de boot te zien, verschuiven we de achtergrond met 25px naar rechts:

en dat is precies wat we bedoelen:

 fig. 8

live background:

 

 

We kunnen ook hetzelfde zeegezicht-plaatje als achtergrond voor verschillende tekstvakken gebruiken:

 

 

 

Met gebruik van Peter Stanicek's "snelle css-rollovers" techniek kunnen we een rollover (hover) knop van onze figuur maken:

Bij Zweven

Eenvoudig, geen javascript nodig en voor alle browsers geschikt!

Als toepassing hiervan kan ook een heel (menu-) knoppenblok van één image gemaakt worden.

• Zie het artikel "Een blokje knoppen".

 

En met een beetje javascript erbij (zie broncode) kan je een dynamisch panorama van de background maken en/of deze omhoog & omlaag laten bewegen: een soort "animated gif", maar dan met één image in plaats van een hele serie achter elkaar geplakt, dus veel kleiner in kB's.

 

Wat links:

 

Geniet van het schone css!

23 oct. 2005