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
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 ???
Also für den Rahmen wenn das Bild zu klein ist ???
Antwort 3 von katy
zB. so
also: Hintergundbild "hintergrund.jpg" soll horizontal und vertikal zentriert angezeigt werden, nicht wiederholt. Die Hintergrundfarbe ist dabei #0f0 (entspricht "lime")
katy
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.
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>
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
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:
katy
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.theoretisch ist es mit Javascript möglich
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
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
das entspricht im Wesentlichen der Lösung, die Supermax vorschlug.
katy