[3.2] Responsive - Hintergrundbild anpassen

[Wishmaster84]

Huhu Leute,

wahrscheinlich ist es nur ein kleiner Fehler, aber ich komme icht auf die Lösung. Mein Hintergrundbild verschiebt sich leider wenn sich die Auflösung ändert. Ich dachte durch folgenden Code konnte ich das beheben:

Code: Alles auswählen

background-size: cover;

Die Figur in meinem Hintergrundbild ist bei kleinerer Auflösung kaum noch zu sehen am rechten Rand. Gibt es eine Möglickeit dies dauerhaft zu fixieren, egal welche Auflösung es ist.

http://www.neuesforum.so-buli.de/

Vielen Dank

[Lehrling]

Eine etwas aufwändige Lösung wäre die, verschiedene Bilder für den Hintergrund zu erstellen und sie bestimmten Bildschirmgrößen zuzuordnen per

Code: Alles auswählen

body {
 background-image: url("bildxxl.png"); 
 background-position: center;
 background-repeat: no-repeat; 
} 

@media (max-width: 1100px) {
body { 
 background-image: url("bildxl.png"); 
        } 
}

@media (max-width: 900px) {
body { 
 background-image: url("bildl.png"); 
        } 
}

Die Bilder müssten halt so verkleinert werden, dass sie optimal zur jeweiligen Auflösung passen.

[Wishmaster84]

Ok, vielen Dank für deine Mühe.

Habe nicht gedacht das es so aufwendig ist, habe unsere alte Seite noch mal gecheckt. Kann das sein, das dort ein anderer Code verwendet wird. Das Hintergrundbild ist das gleiche. Könntest du dir das evtl. noch mal ansehen.

https://forum.so-buli.de/

[Lehrling]

Da lautet der Code:

Code: Alles auswählen

background:url(images/page_bg.jpg) no-repeat fixed top;

Und der Spieler verschwindet auch irgendwann, wird aber halt nicht kleiner. Bei cover zoomt das Bild ja mit.
Es ist halt die Frage, was genau du erreichen möchtest.