Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Größe von Hintergrundbild automatisch anpassen - CSS





Frage

Gibt es ne Möglich keit das Hintergrundbild einer HTML-Seite immer der Größe des Browserfensters anpassen. Wenn ich das Hintergrundbild kleiner mache ist ein weißer Rand ausenrum und wenn ich es zu groß mache sieht man es nicht komplett.

Antwort 1 von katy

Hallo Computerfreaki,

damit musst du leben lernen. Es gibt keine Möglichkeit bei HG-Bildern Größenangaben zu setzen.
Mit etwas Geschick sorgst du aber dafür, dass das HG-Bild zum Rand hin in eine Farbe ausläuft und machst diese dann zur HG-Farbe (statt weiss), damit wenigstens dieser Rahmen-Effekt verschwindet.

katy

Antwort 2 von Computerfreaki

Wie kann ich denn die Farbe für den Rahmen anpasssen ???

Also für den Rahmen wenn das Bild zu klein ist ???

Antwort 3 von katy

zB. so

body {
background:url(hintergrund.jpg) center center no-repeat #0f0;
... (weitere CSS-Angaben) ...
}

also: Hintergundbild "hintergrund.jpg" soll horizontal und vertikal zentriert angezeigt werden, nicht wiederholt. Die Hintergrundfarbe ist dabei #0f0 (entspricht "lime")

katy

Antwort 4 von Helfer1

Hi,
theoretisch ist es mit Javascript möglich, macht aber wenig Sinn, da die Auflösung des Bildes nicht mit geändert wird.
Dadurch wird bei Vergrößerung oder Verkleinerung das Bild unscharf.

Antwort 5 von Helfer1

Nachtrag:
Eine etws aufwendige Möglichkeit wäre evtl. für jede Bildschirmauflösung ein Bild bereitzustellen, dass nach einer javascript-Abfrage der Bildschirmauflösung das entsprechende Bild einfügt.

etwa so:
Weiterleitung je nach Bildschirmgröße.

<script type="text/javascript">
<!--
var Bildschirm = screen.width
if(Bildschirm == 800) {location.href="aufloesung800.htm"}
if(Bildschirm == 1024) {location.href="aufloesung1024.htm"}
else {location.href="andere_aufloesung.htm"}
//-->
</script>

Antwort 6 von katy

Hallo Helfer1,

deine liebgemeinte Lösung hat aber den großen Nachteil, dass du Bildschirmgröße und Browserfenstergröße miteinander verwechselt hast. Es funktioniert daher nicht so wie gewünscht.

katy

Antwort 7 von katy

Hallo Helfer1,

leider habe ich erst jetzt deine Antwort 4 gelesen:
Zitat:
theoretisch ist es mit Javascript möglich
Kannst du darüber mehr schreiben oder einen Link angeben? Nach einer Möglichkeit die Größe des HG-Bildes per JavaScript zu bearbeiten suche ich schon lange. Also, wenn du mir mehr darüber verraten könntest wäre das eine große Hilfe.

katy

Antwort 8 von Supermax

Mit google habe ich unter anderem das hier gefunden (Englisch). Diese Lösung verwendet ein JavaScript, um das Hintergrundbild in der Größe anzupassen.

Antwort 9 von katy

Hallo Supermax,

danke für den Tipp, aber das ist leider nicht das, was ich mir erhofft habe.

Bei dieser Lösung wird ja lediglich ein normales Bild in einem DIV per z-index nach hinten verschoben und dann per onresize der jeweiligen Browserfenstergröße angepasst. Dabei arbeitet das Script mit document-write, was ich ja in meinen XHTML-Seiten gleich vergessen kann. Aber vermutlich könnte dieser Schwachpunkt mit DOM-Methoden umgangen werden. Aber mit der Idee, ein Vordergrundbild als HG-Bild zu missbrauchen kann ich mich erst einmal nur schwer anfreunden.

Was mich aber wirklich interessiert ist eine Lösung für echte HG-Bilder.

Nochmals Danke für die Mühe

katy

Antwort 10 von Helder1

Antwort 11 von katy

Hallo Helder1,

das entspricht im Wesentlichen der Lösung, die Supermax vorschlug.

katy