Startseite aufrufen
« Zurück
Vor »

Kommentar schreiben | Drucken

Die Krux mit den Hintergrundbildern (HTML)

-- 03.September 2005 (#33)

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.

Geschrieben von
netzuser (anonym)
-- 19.Dezember 2010 (#12)

Hi Webmaster,

HG-Bild einbinder mit CSS, eine sehr elegante Lösung, darauf wäre ich als Anfänger
nicht so schnell gekommen.

Herzlichen dank für den öffentlichen Tip,

m.f.g. Netzuser

Geschrieben von
Dirk
-- 24.Januar 2006 (#3)

Das Bild besteht ja auch praktisch aus Linien oder Streifen. Bei Linien oder rechtwinkligen geometrischen Figuren macht die Skalierung kein Problem, aber wer benutzt so etwas als Hintergrundbild? So etwas passt vielleicht zu Retro-Seiten (diese primitiven grafischen Zeichnungen erinnern irgendwie an Klötzchengrafik), aber ansonsten ist das für mich ein Spezialfall und Spezialfälle habe ich hier nicht beachtet.

Geschrieben von
Henning (anonym)
-- 13.August 2007 (#7)

Aber wenn ich den Workaround in ein Table lege, dann erscheint der Text ausserhalb des Tables oben links. Wenn ich "absolute" in "relative" verändere, erscheint er unter dem Table. Somit auch keine optimale Lösung - oder ich raff´s nicht richtig.

Geschrieben von
pascal (anonym)
-- 24.Januar 2006 (#2)

ich hab mal so ein "bild" hiering gelegt:
http://pascal.selfip.org/grafik/earth_sky.html
der witz daran: skalieren ist kein problem (sieht immer gut aus), die größe ist extrem gering (614 byte !).
schade, dass da kein text/grafik draufgelegt werden kann …

Geschrieben von
pascal (anonym)
-- 24.Januar 2006 (#1)

skalierbare hintergrundbilder sind nicht überflüssig: z.B. kann mit 30 pixeln ein genialer "copper-effekt" (trick aus den 80ern von computergrafikprogrammierern) erzeugt werde: die illusion einer 3-d landschaft (himmel und erde).

Geschrieben von
pascal (anonym)
-- 17.Februar 2006 (#4)

hast natürlich recht mit dem retro zeuch.
ich habs jetzt mit nem trick jedenfalls hinbekommen, und ich finds recht hübsch (siehe den homepage-link), oder ?
wen es nicht kümmert, dass es nur 427Bytes braucht, wird es wohl überflüssig finden:
der "trick" besteht darin, die "grafik" z.B. mindestens 768 pixel lang zu machen und nach unten zu spiegeln( falls gescrollt wird, sieht dann schöner aus). so wirds eingebunden:
<body style=" background-image: url(images/copper.gif);>

Das Hinzufügen von Kommentaren wurden deaktiviert.