29.12.2008

Bildschirmfüllende Hintergrundgrafik

Ein häufiges Problem vieler Webmaster: Wie kann eine Hintergrundgrafik unabhängig von der Fenstergröße immer bildschirmfüllend angezeigt werden.
Grundsätzliche Antwort: Überhaupt nicht, denn Hintergrundgrafiken lassen sich nicht skalieren.
Insofern ist auch - zugegeben - die Überschrift dieses Kapitels irreführend. Aber ich habe sie so gewählt, weil im Internet doch immer wieder nach diesem Begriff gesucht wird.

Allerdings: Mit Hilfe von CSS lässt sich auch dieses Problem lösen: Wir müssen lediglich dafür sorgen, dass es sich bei der Grafik nicht um eine Hintergrundgrafik, sondern um ein skalierbares Image handelt. Hierzu verwenden wir folgenden Trick:

Wir definieren einen Div "#hintergrund", welchem wir 100% Höhe und 100% Breite zuweisen. Da sich diese Werte auf html und body beziehen, legen wir ebenso für html und body 100% Höhe und 100% Breite fest. Um Ränder zu vermeiden, setzen wir für html und body margin und padding auf "0".
Damit das "Hintergrundbild" auch bei längerem Inhalt bildschirmfüllend angezeigt wird, weisen wir "html und body" noch ein "overflow: hidden" zu.
Den "#hintergrund" positionieren wir relativ mit ebenfalls 100% Breite und 100% Höhe, um den folgenden Content darin entsprechend unterzubringen.
Der "#content" soll dagegen bei größerem Inhalt scrollbar sein. Deshalb erhält er ein "overflow: auto".
Schließlich sorgen wir noch mit entsprechenden z-Indizes dafür, dass sich #content vor #hintergrund befindet.
Daraus ergeben sich folgende CSS-Angaben:


html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#hintergrund {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}

#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
overflow: auto;
}

Im HTML-Quelltext wird nach dem Öffnen von <body> der img-Tag geöffnet, dem wir den zuvor definierten ID "#hintergrund" zuweisen.
Damit wird die verwendete Grafik auf jeweils 100% Höhe und 100% Breite skaliert.
Dem img-Tag wird als Source die verwendete Hintergrundgrafik zugewiesen; im Beispiel die Grafik "bg1.jpg".
Im Anschluss daran folgt unser #content, in den wir beliebigen Inhalt einfügen können. Daraus ergibt sich folgender HTML-Quelltext:

<body>
<img id="hintergrund" src="bg1.jpg" border="0" alt="Hintergrundbild">
<div id="content">
<h1>Inhalt</h1>
</div><!--Ende #content-->
</body>

Als Ergebnis erhalten wir eine skalierte Hintergrundgrafik, die sich allen Bildschirmgrößen anpasst. Indem ihr die Demo öffnet, könnt ihr bei vergrößertem oder verkleinertem Bildschirmfenster testen, dass die Hintergundgrafik stets bildschirmfüllend angezeigt wird.

Hinweise über die Nachteile bildschirmfüllender Grafiken

Die Verwendung der beschriebenen Methode birgt folgende Nachteile, über die man sich im Klaren sein muss:

Quelle:
Die Anregung zu dieser Anleitung stammt von Dr. Web .

nach oben


Warning: include(mainincludes/footer.php): failed to open stream: No such file or directory in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0055.php on line 153

Warning: include(mainincludes/footer.php): failed to open stream: No such file or directory in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0055.php on line 153

Warning: include(): Failed opening 'mainincludes/footer.php' for inclusion (include_path='.:/opt/php/7.2.11/share/pear') in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0055.php on line 153