Mir ist jetzt mehrfach aufgefallen, dass Leute danach fragen, wie sie ein Hintergrundbild in ihre (X)HTML-Seite einbinden können oder wie man das Hintergrundbild „stretchen“ kann.
Ganz einfach:
<body background="bild.jpg">
<tr background="bild.jpg">
<td background="bild.jpg">Das background-Attribut ist allerdings deprecated. Wesentlich eleganter und mit mehr Einstellungsmöglichkeiten geht’s mit CSS:
background-image: url(bild.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
Für das zweite Problem gibt es aber keine vernünftige Lösung. Weder (X)HTML, noch CSS bieten eine Möglichkeit dazu, ein Hintergrundbild über den gesamten Bildschirm zu dehnen. Erst CSS3 könnte dies möglich machen. Die einzige Möglichkeit, dennoch ein skalierbares Hintergrundbild einzufügen, ist ein CSS- oder JavaScript-Workaround. Diese Workarounds erfordern aber wiederum, dass CSS bzw. JavaScript vorhanden und aktiviert ist, ansonsten kann es zu unschönen Effekten kommen. Die Workarounds werden womöglich auch nicht von allen Browsern richtig dargestellt.
Mit CSS wäre dies ein möglicher Workaround:
<body style="margin: 0;">
<img src="bild.jpg" width="1" height="1" style="height: 100%; width: 100%;" alt="" />
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; padding: 2em;">
Hier kommt nun der Inhalt
</div>Das funktioniert in den gängigen Browsern eigentlich sehr gut, bis auf den IE, denn dieser zeigt dabei einen vertikalen Scrollbalken an. Sobald CSS ausgeschaltet ist, hat man den Effekt, dass erst ein (mehr oder weniger) großes Bild folgt und der Text unten drunterhängt.
Abgesehen davon halte ich die Idee, ein (skalierendes) Hintergrundbild in die Seite zu verpflanzen, für unsinnig. Die Gründe dafür sind:
Qualitätsverlust bei Bildverkleinerung (Extrapolation).
Qualitätsverlust bei Bildvergrößerung (Interpolation).
Nonkonforme Auflösungen (also Auflösungen die kein 4:3-Verhältnis haben) oder verkleinerte Browserfenster (z.B. wenn eine Sidebar angezeigt wird) führen dazu, dass Bilder unproportional skalieren. Ergo: Wieder Qualitätsverlust.
Hintergrundbilder sind meist recht groß, also höhere Ladezeit.
Um die Größe von Hintergrundbildern auf ein erträgliches Maß zu reduzieren, müssen die Bilder komprimiert werden. Erneuter Qualitätsverlust.
Hintergrundbild wiederholt sich (Kachelung).
Es bilden sich bei höheren Auflösungen weiße Ränder.
Durch wechselnde Kontraste wird die Lesbarkeit der Schrift stark reduziert. Das ist nicht nur für normale Surfer anstrengend, sondern für Sehbehinderte eine Barriere.
Es empfiehlt sich also, nur stark verblasste kontrastarme Hintergrundbilder zu verwenden, in so fern sie als „Trägerfolie“ für Inhalte dienen. Ansonsten bieten sich noch Hintergrundkacheln an, also kleine kontrastarme Texturen, die auf dem Hintergrund eine Art Tapete bilden.