Bon. Ik zit zo’n beetje mijn tanden te breken op volgend probleem: schaalbare achtergrondbeeldjes! Via CSS zorg ik ervoor dat een bepaald block level element een achtergrond image krijgt. Bijvoorbeeld zo:

element {<br> background: url(./img/bg.png) repeat;<br> ...<br> }

De afbeelding heeft – uiteraard – vaste afmetingen. Bijvoorbeeld 800 bij 20 pixels. Op een scherm met resolutie 1600 bij 1200 pixels zal dat er mooi uitzien. Maar o wee wanneer je je scherminstellingen neerhaalt naar 800 bij 600 pixels! In plaats van mooi te schalen, vult het element met de achtergrond opeens het volledige scherm. Andere elementen vallen of lopen weg en de bezoeker krijgt op zijn best een hoop bijeengegooide elementen. Not fun!

Ik zoek dus nu een oplossing voor dit probleem.

Natuurlijk, ik kan wachten tot CSS3 ondersteund wordt, maar aan het huidige tempo kan dat nog lang gaan duren. Ik zou ook kunnen prutsen met javascripts die de resolutie sniffen en op basis daarvan een aparte stylesheet kiezen. Maar da’s ook niet bepaald in interessant idee. Dat betekent dat ik al mijn achtergrondbeeldjes in drievoud moet maken. Om nog maar te zwijgen van de stylesheet!

Neen, ik zoek dus een pure CSS/XHTML oplossing voor dit probleem. Een oplossing is gewoon zorgen dat je content niet breder is dan 800 pixels. Of nog: dat je met ruime marges werkt! Het Kubrick theme dat mijn blogje gebruikt is daar een mooi voorbeeldje van. Ook Netlash maakt gebruik van een dergelijk ‘lapmiddel’. Het werkt, dat wel, maar je verliest wel énorm veel ruimte aan een kale achtergrond. Ik vraag mij dus af of het ook anders kan?

Iemand ideetjes?