tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/47687-verwendung-responsive-verhalten-von-hintergrundbildern-im-zentrierten-bereichRockSolid Themes: Discussion 2019-09-11T11:07:47Ztag:help.rocksolidthemes.com,2012-07-23:Comment/476112142019-09-10T17:52:50Z2019-09-10T17:52:50ZVerwendung: Responsive-Verhalten von Hintergrundbildern im Zentrierten Bereich<div><p>Produkt: Oneo Contao<br>
Contao-Version: 4.4.42</p>
<p>Liebe Rocksolids,<br>
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<br>
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).<br>
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.</p></div>Jens Pielawatag:help.rocksolidthemes.com,2012-07-23:Comment/476112142019-09-11T07:22:54Z2019-09-11T07:22:54ZVerwendung: Responsive-Verhalten von Hintergrundbildern im Zentrierten Bereich<div><p>Vielen Dank für Ihre Frage.</p>
<p>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.</p>
<p>Können Sie uns einen Screenshot der fehlerhaften Darstellung senden?</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/476112142019-09-11T07:46:37Z2019-09-11T07:46:37ZVerwendung: Responsive-Verhalten von Hintergrundbildern im Zentrierten Bereich<div><p>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.<br>
Liegt es an der Eigenschaft "fixed" für die Hintergrundbilder, oder ist der "fensterhohe" Ausschnitt ein Hindernis?</p></div>Jens Pielawatag:help.rocksolidthemes.com,2012-07-23:Comment/476112142019-09-11T11:07:46Z2019-09-11T11:07:46ZVerwendung: Responsive-Verhalten von Hintergrundbildern im Zentrierten Bereich<div><blockquote>
<p>Liegt es an der Eigenschaft "fixed" für die Hintergrundbilder, …</p>
</blockquote>
<p>Ja, durch die Positionierung als <code>fixed</code> 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 <code>background-size: contain;</code> in Ihrem CSS-Code hinzufügen.</p></div>RockSolid Themes