Altijd beeldvullende achtergrond-afbeelding ...
Hoi Samdeezel,
Zolang nog niet alle browsers en in omloop zijnde browserversies css3 goed ondersteunen, kan je geen gebruikmaken van de achtergrond als meeschalende achtergrond-afbeelding.
In css2.1 (de huidige versie) kunnen achtergronden
niet gerekt of gekrompen worden.
Wat wel kan: voorgrond-afbeeldingen van formaat veranderen. D.w.z. een <img> dat in de html is opgenomen.
Daarvoor heb je twee <div> containers nodig: eentje voor de #background, en eentje voor #deRest, die onafhankelijk van elkaar zijn (via absolute, relatieve en relatieve posities).
Binnen de #background <div> zit het "background" image, dat via de css altijd op 100% breed en 100% hoog wordt getrokken. Door de "fixed" positie ban de #background wordt deze gefixeerd (vastgeprikt) als achtergrond van het hele beeldscherm, en kan deze niet mee-scrollen met de inhoud van #deRest.
Zoals je in het voorbeeld kunt zien, is het uitkijken met beeldvullende achtergronden:
- Ze kunnen bv. niet een foto zijn met een normaal contrast tussen licht en donker, anders kunnen stukken tekst niet meer goed te lezen zijn.
- Bij donkere tekst moet de afbeelding aan de lichte/fletse kant zijn, bij witte tekst en donkere achtergrond moet die donkere achtergrond juist alleen maar uit heel donkere tinten bestaan.
- En zelfs dan kan de tekst moeilijk leesbaar zijn (altijd, of bij een resolutie die ongelukkig uitkomt voor de lijnen en vlakken in de achtergrond).
- Heb je pech, dan is zowel de achtergrond-afbeelding eigenlijk niet goed te zien als ook de voorgrond aan tekst moeilijk leesbaar!
- Daar kan je iets aan doen door het inhoud-gedeelte een vette tekst te geven, of er een halftransparante achtergrond in te zetten. Maar daarmee wordt de achtergrond-figuur moeilijker te zien.
- Je kan ook het hele middenstuk met de inhoud een vaste, ondoorzichtige achtergrondkleur geven. Dan is de tekst prima leesbaar, maar is in het midden de achtergrond helemaal niet meer te zien: die zit dan alleen aan de zijkanten.
- In het voorbeeld zijn zowel de hoogte als de breedte beeldvullend gemaakt: dat betekent dat de afbeelding uit verhouding getrokken kan worden. Hangt van de afbeelding af, of dat kan: anders kan bv. een foto bij een breed maar niet zo hoog venster helemaal platgedrukt worden.
- Dit kan je testen door het browser-window niet fullscreen te laten zijn, en dan met de muis de rechteronderhoek aanklikken en in cirkeltjes heen en weer slepen. Dan zie je meteen wat er met de afbeelding gebeurt.
- Je kunt ook alleen de breedte op 100% zetten, dan blijft de verhouding wel in verhouding. Maar dan moet je weer uitkijken dat de hoogte van de afbeelding niet te klein is als iemand een smal venster gebruikt (dan zit er weer niets onder).
Kortom, het is altijd passen en meten, en vooral: zorgvuldig uittesten bij verschillende resoluties en vensterformaten.
Succes!
Met vriendelijke groet,
CSShunter
