Verwendung: Responsive-Verhalten von Hintergrundbildern im Zentrierten Bereich

Jens Pielawa's Avatar

Jens Pielawa

10 Sep, 2019 05:52 PM

Produkt: Oneo Contao
Contao-Version: 4.4.42

Liebe Rocksolids,
ich brauche Hilfe bei den Zentrierten Bereichen. Während ich es ja nun geschafft habe, dass sie im Hintergrund "festgenagelt" werden beim Scrollen, verhalten sich die Bilder aber responsive nicht wie gewünscht. Beispielseite: neu.jan-buerger.de
Der Slider im Header macht es vor und verkleinert sich "gummiartig" mit, je kleiner man das Browserfenster zieht. Die Bilder im Zentrierten Bereich tun dies nicht, im Viewport für Tablet und Handy bleiben sie groß, und so manches Motiv wird dann auch ins Leere gestellt (obwohl ich "wichtige Bildbereiche" markiert hatte).
Welche Einstellungen müssen getätigt werden, damit sich diese Bilder beim Verkleinern eines Fensters (oder halt Handydarstellung) entsprechend mitverkleinern? Ich habe jetzt alle möglich Kombinationen zum Einstellen durch, aber kein passendes Ergebnis.

  1. Support Staff 1 Posted by RockSolid Theme... on 11 Sep, 2019 07:22 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Wir konnten den Fehler auf Ihrer Website nicht reproduzieren. In unserem Test hat haben sich die Bilder wie gewünscht verkleinert und an die jeweilige Browserfenstergröße angepasst.

    Können Sie uns einen Screenshot der fehlerhaften Darstellung senden?

  2. 2 Posted by Jens Pielawa on 11 Sep, 2019 07:46 AM

    Jens Pielawa's Avatar

    Danke fürs Nachschauen. Anbei zwei Screenshots in schmaler Breite (ähnlich Handy), wo die Hintergrundbilder "fensterhoch" bleiben, dementsprechend wohl nicht mit skaliert werden und dann je nach Bildlage kuriose Anschnitte liefern.
    Liegt es an der Eigenschaft "fixed" für die Hintergrundbilder, oder ist der "fensterhohe" Ausschnitt ein Hindernis?

  3. Support Staff 3 Posted by RockSolid Theme... on 11 Sep, 2019 11:07 AM

    RockSolid Themes's Avatar

    Liegt es an der Eigenschaft "fixed" für die Hintergrundbilder, …

    Ja, durch die Positionierung als fixed muss das Hintergrundbild auf die volle Größe des Browserfensters skaliert werden, ansonsten wären weiße Ränder über und unter dem Bild zu sehen. Wenn Sie die Darstellung mit Rändern wünschen, können Sie background-size: contain; in Ihrem CSS-Code hinzufügen.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac