De patrijspoort-theorie: plaatsing van achtergrond-figuren met css

Plaatsing van achtergrond-figuren in css

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. Ik heb het maar eens in html gegoten.

francky

• Theorie
• Afgekort
• Conclusies
• Voorbeelden
• Wat links

(Dit artikel is ook gepubliceerd in: Francky’s Developers Corner)

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 voortbeeld maakt dat niet uit.

De basis css voor deze achtergrond is:

stylesheet

.seabox {
background-image: url(images/seascape.gif);
background-repeat: no-repeat;
}


html

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:

stylesheet

.seabox {
background-image: url(images/seascape.gif);
background-repeat: no-repeat;
background-position: 0 0;
/* NB: all%uFFFDn een spatie tussen 0 en 0 (geen komma of puntkomma) */
}


html

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:

stylesheet

.seabox {
background-image: url(images/seascape.gif);
background-repeat: no-repeat;
background-position: 50% 0;
}


html

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:

stylesheet

.seabox {
background-image: url(images/seascape.gif);
background-repeat: no-repeat;
background-position: 100% 0;
;}


html

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):

stylesheet

.seabox {
background-image: url(images/seascape.gif);
background-repeat: no-repeat;
background-position: 0 -33px;
}


html

Afgekort

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

stylesheet

.seabox {
background:
url(images/seascape.gif) no-repeat 0 0;
/* NB: alleen spaties tussen de eigenschappen */
}


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.

Voorbeelden

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

fig. 6

dan krijgt het invoegen van:

stylesheet

.seabox1 {
background-image: url(images/seascape.gif);
background-repeat: no-repeat;
}


html

...

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:

stylesheet

.seabox2 {
background-image: url(images/seascape.gif);
background-repeat: no-repeat;
background-position: 25px 0;
}


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!

Wat links:

• Introductie tot css
• Afbeelding verwisselen bij mouseover met 1 afbeelding
• Een paar css tips & tricks op designhulp.nl
• Petr Stanicek: Fast Rollovers Without Preload
• PIE: Position Is Everything
• Dave Shea: CSS Crib Sheet
• Other CSS-articles Mezzoblue
• Eric Costello: ‘Look Ma, No Tables’ & other CSS techniques
• Owen Briggs: CSS panic guide & others
• Stu Nicholls: CSS Play
• francky’s Flexibele ronde hoeken
• Hans de Jong: handleiding html en css

Het schone css: maak er wat moois van!

francky

• Tweet