Skalieren Background Image

[sachage]

Hallo Zusammen

in meinem Template habe ich ein Backgroundimage mittels CSS im Body eingefügt:

body { background:url("pfad zum File")  center top repeat-y

Funktioniert genau so wie ich es haben möchte:
Korrekte Ansicht:
jazz_fenster_korrekt.jpg


Wenn man nun das Fenster verkleinert und nach rechts scrollt ergibt sich folgendes Problem:
Fehlerhafte Ansicht:
jazz_fenster_fehlerhaft.jpg

Insbesondere auf dem Ipad ist dies nicht gewünscht.

Kann man das Backgroundimage so setzen, dass es nicht skaliert? Sprich immer gleichgross bleibt, resp. abgeschnitten wird?
Wie würde man dies machen?

Besten Dank für Eure Hilfe.

Grüsse

Sacha

[hermes2.11]

Hallo,

vielleicht suchst Du soetwas wie den easy_bg_stretcher?

https://contao.org/de/extension-list...020009.de.html


Gruß

[sachage]

Hallo Hermes2.11

danke für Deine Antwort.

Wenn ich es richtig verstehe kann der easy_bg_stretcher 'stretchen'. Ich such eine Möglichkeit dass der Background nicht skaliert wird.

Gruss

Sacha

[Samson1964]

Ich denke mal, er muß sogar skaliert werden, damit es klappt. In der Grundeinstellung werden Hintergrundbilder nicht skaliert. Dein Hintergrund ist 1100px breit und bleibt auch so breit, wenn das Fenster schmaler wird. Dadurch entsteht wahrscheinlich diese seltsame Verschiebung. Aber vielleicht ist das ja schon eine Art Skalierung: Der Browser versucht links und rechts in body den weißen Rand beizubehalten. Und #wrapper behält seine Maße bei. Dein Hintergrundbild gehört aber nicht zu #wrapper. Zwangsläufig läuft dann was aus dem Ruder.

Also das Bild in #wrapper reinpacken.

[tab]

Was ist überhaupt was? Also was ist das Hintergrundbild von body und was sind Inhalte? Ist das Hintergrundbild nur ein dunkler Bereich mit hellem Rand?? Oder gehört der Rand auch schon nicht mehr zum Bild? Eins scheint mir offensichtlich: repeat-y ist zumindest optisch im "Fehlerfall" völlig danebengegangen.

[Samson1964]

#wrapper {
  background:url(background_festival.png) center top repeat-y
}

statt

body {
  background:url(background_festival.png) center top repeat-y
}

[sachage]

Hallo Frank

besten Dank für Deine Lösung. Nun funktioniert es wie gewünscht. Ich hab zwar noch nicht vollständig verstanden warum das so ist aber ich werde mich schlau machen.

Du schreibts

Und #wrapper behält seine Maße bei.

Mich würde interessieren warum das so ist.

Nochmals besten Dank und vielleicht am Jazzfestival in Sargans im schönen Heidiland? ;-)

Grüsse

Sacha

[Samson1964]

Das DIV mit der ID wrapper ist der Container für Deine Website. Was liegt also näher als den Hintergrund dort reinzunehmen, wo er auch benutzt werden soll.
body dagegen ist das oberste Element, praktisch das Browserfenster. Es kann nicht das Verhalten eines untergeordneten Elements (wrapper) erben. Deshalb paßten beide Elemente bei bestimmten Breiten nicht mehr zusammen.

Genau wie Du vorher habe ich es aber bei der Website meines Vereins gemacht. Da ist für body ein Hintergrundbild definiert. Das wollte ich auch wirklich da haben.