Hintergrundbild anpassen

[Ivan Tiefenböck]

Guten Tag, wieder mal!

Wie schon im vorhergegangenen Beitrag erläutert, bin ich zur Zeit mit dem erstellen einer News/Reviews Website beschäftigt.

Mein Problem: Ich habe ein Hintergrundbild eingefügt, welches die gesamte Höhe und Breite der Seite ausfüllen soll, das funktioniert auch bisher, aber leider nur wenn das Fenster maximiert ist. Es soll aber auch im Hochformat (zb. bei verkleinerten Fenstern, oder Handydisplays) das ganze Fenster ausfüllen ohne das sich die Proportionen des Bildes ändern (Mit dem "repeat"-Befehl zu arbeiten ist nicht möglich).

Der aktuelle CSS-Code des Hintergrunds:

#background {
	width: 100%;
	height: 100%;
	position: fixed;
	background-image: url(../images/1small.jpg);
	background-position: left top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	min-height: 700px;
	min-width: 100px;
	}

Grüße

Ivan

[MrMurphy1]

Hallo

ohne das sich die Proportionen des Bildes ändern

Das wird mit "background-size: cover" erreicht.

Gruss

MrMurphy

[Ivan Tiefenböck]

Das wird mit "background-size: cover" erreicht.

Vielen Dank!

Das mein Problem durch ein einziges Wort gelöst wird dachte ich nicht! :D

Grüße _ Ivan_

[marctrix]

Hej Ivan,

Mein Problem: Ich habe ein Hintergrundbild eingefügt, [...]. Es soll [auf jedem Bildschirm] das ganze Fenster ausfüllen ohne das sich die Proportionen des Bildes ändern

Aber bitte kein eigenes Element dafür.

html {
	background-image: url(foo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: fixed;
}

Übrigens könnte man mit der background-position noch experimentieren, wenn man den Ausschnitt bestimmen möchte, der sichtbar ist, wenn das Bild z. B. zu breit ist auf einem Handy-Hochformat-Screen...

Marc

[Matthias Apsel]

Hallo marctrix,

html {
	background-image: url(foo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: fixed;
}

Übrigens könnte man mit der background-position noch experimentieren, wenn man den Ausschnitt bestimmen möchte, der sichtbar ist, wenn das Bild z. B. zu breit ist auf einem Handy-Hochformat-Screen...

Ebenso mit der url. Bis hin zu background-image: none;

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@marctrix

Übrigens könnte man mit der background-position noch experimentieren, wenn man den Ausschnitt bestimmen möchte, der sichtbar ist, wenn das Bild z. B. zu breit ist auf einem Handy-Hochformat-Screen...

Vermutlich möchte man für Hochformat und Querformat jeweils verschiedene Hindergrundbilder. Mit orientation-Media-Query kein Problem.

LLAP 🖖