Hintergrundbild auf mobilem Endgerät als Ganzes darstellen

1 tommik

Hallo Jörg,

ich versuche ein Hintergrundbild auf einem mobilen Endgerät als Ganzes darzustellen.
Ich dachte, das würde mit "background-size: cover" funktionieren. Scheint es aber nicht. Weißt du, woran es liegen könnte?

Die Website ist: https://www.etage-drei.de

PS: Super gut, dass es dein Forum nach all den Jahren noch gibt. :)

2 Jörg Kruse

Wenn das Hintergrundbild komplett angezeigt werden soll:

background-size: contain;
background-repeat: no-repeat;
background-position: center center;

Dann hast du aber ggf. Streifen oben und unten bzw. links und rechts, wenn der Viewport andere Proportionen hat.

"background-size: cover" sorgt dafür, dass der Hintergrund vollständig ausgefüllt wird, wobei ggf. Teile des Bildes abgeschnitten werden.

3 tommik

Hallo Jörg,

vielen Dank für deine schnelle Antwort.

Ich habe es damit versucht:

body.is-touch .main {
background-attachment: fixed !important;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

Auf dem Handy hat sich nichts geändert. Das Bild wird zwar nur einmal angezeigt, ich sehe aber nur einen kleinen Ausschnitt vom Bild.
"background-size: contain;" ändert daran irgendwie auch nichts.

4 Jörg Kruse

Verwende "contain" statt "cover"! Siehe auch:

https://developer.mozilla.org/de/docs/Web/CSS/background-size#werte

nach oben

Hintergrundbild auf mobilem Endgerät als Ganzes darstellen

Beitrag schreiben (als Gast)