online 1
gast (50)

/ Forum / Webseiten/HTML

Webseiten/HTMLWebseiten/HTML

Fragevon Computerfreaki vom 13.05.2020, 21:08 Options

Größe von Hintergrundbild automatisch anpassen - CSS

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 schreiben

Antwort 1 von katy vom 14.05.2020, 07:28 Options

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 vom 14.05.2020, 08:00 Options

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 vom 14.05.2020, 09:45 Options

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 vom 14.05.2020, 10:54 Options

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 vom 14.05.2020, 11:07 Options

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 vom 14.05.2020, 20:45 Options

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 vom 14.05.2020, 21:03 Options

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 vom 14.05.2020, 21:17 Options

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 vom 14.05.2020, 21:50 Options

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 vom 14.05.2020, 22:38 Options

Antwort 11 von katy vom 15.05.2020, 00:08 Options

Hallo Helder1,

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

katy

Ähnliche Themen

CSS und Forefox 2.0.0.2
SilverTiger  10.03.2007 - 95 Hits - 26 Antworten

textarea automatisch größe anpassen
timoxy  23.06.2007 - 95 Hits - 5 Antworten

Hintergrundbild in Tabellen
sterie389  26.01.2008 - 166 Hits - 6 Antworten

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Version: supportware 1.9.150 / 10.06.2022, Startzeit:Sun Jan 25 18:15:21 2026