Hintergrundbild verschiebt sich in Abhängingkeit vom Content-Inhalt

suederland · 14. November 2020

Hallo,

ich habe auf dieser Testseite ein Hintergrundbild (protostar, static) wie folgt in der user.css eingebunden

Code

.itemid-2 {
background-image: url("/images/stories/wallpapers/background_bl1.png");
background-size: cover;
/*background-attachment:fixed;*/
}

Mich irritiert, dass die 2 Schrägbalken, die an fester Position im Bild stehen, scheinbar wandern.

Und zwar abhängig davon, was im Content steht.

Warum?

background-attachment:fixed;

ist keine Lösung, weil sich die Balken dann beim scrollen unwirsch durch den Beitrag schieben.

vG

anka · 14. November 2020

Das kommt daher, dass rechts mal ein Scrollbalken angezeigt wird, mal nicht (je nach Länge des Inhalts). Füge das hier in dein user.css ein:

Code

body {
  overflow-y: scroll; /* Show vertical scrollbar */
}

suederland · 14. November 2020

Ok, der Scrollbalken ist das Kriterium! Das kann ich nachvollziehen.
Wenn ich nun in der Klasse(!) .body einen Scrollbalken einfüge, hat dieser keine Auswirkung auf o.g. Problem.
Guckst Du hier.
Kriterium ist der Scrollbalken im Browser!

Der komplette .body müsste über alle Menüeinträge auf eine einheitliche Größe gesetzt werden, was aber die Gestaltungfreiheit im Beitrag einschränkt.

Ich weiß es nicht!

Es wäre blöd, wenn eine Designidee an solchen Randbedingungen scheitern würde.

vG

anka · 15. November 2020

Du sollst es ja auch nicht bei der "Klasse(!) .body" einfügen, sondern beim Element(!) body (ohne Punkt) .

Einfach mal irgendwo im user.css genauso einfügen, wie ich es geschrieben habe:

Code

body {
  overflow-y: scroll; /* Show vertical scrollbar */
}

suederland · 15. November 2020

So, das habe ich jetzt gemacht!

Nun ist immer ein scrollbar am rechten Bildschirmrand zu sehen.
Gut zu wissen. Sieh hier.

Wenn dieser nun gebraucht wird, weil es was zu scrollen gibt, habe ich wieder den 'Versprung'.
Scheint mir auch logisch, da der Hintergrund neu auf den gesamten Bildschirm skaliert werden muss; background-size: cover;

Ich habe das Layout etwas geändert (Hauptsache die Balken verschwinden nicht hinter dem Inhalt) und den Hintergrund fixiert; background-attachment:fixed;

Danke!
vG

Tags