Seite 1 von 1

[3.2] Responsive - Hintergrundbild anpassen

Verfasst: 01.09.2019 02:41
von 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

Re: [3.2] Responsive - Hintergrundbild anpassen

Verfasst: 01.09.2019 11:42
von 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.

Re: [3.2] Responsive - Hintergrundbild anpassen

Verfasst: 01.09.2019 14:19
von 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/

Re: [3.2] Responsive - Hintergrundbild anpassen

Verfasst: 02.09.2019 07:49
von 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.