Image-Polyfill und Hintergrundbilder

[operatorone]

Hallo zusammmen,

ich habe mich gefragt – in Zeiten größzügiger Hintergrundbilder und OnePager – ob sich Hintergrundbilder aus einem Inhaltselement, sofern man Bildgrößen zuordnenen kann, auch mit Polyfill verarbeiten lassen.

Sprich, ein alternatives Hintergrundbild zu nutzen, wenn sich die Auflösung ändert. Oder bin ich da auf dem Holzweg und das geht eh nur bei Bild-Elementen und dann müsste ich eventuelle überlagernde Inhalte per CSS z-index drüber legen?

Würde mich über eure Meinungen dazu freuen und hoffe auf eine spannende und vor allem performate Lösung

Viele Grüße,
operatorone

[mlweb]

Hintergrundbilder kannst Du doch mit css und mediaqueries an Pixeldichte und Bildschirmbreite anpassen oder geht es um normale Bilder, die nur in den Hintergrund gelegt werden, damit ein Redakteur diese besser bearbeiten kann oder das Ganze als Slideshow läuft etc.

[operatorone]

Hi mlweb,

es geht schon um Hintergrundbilder. Die wollte ich anders zuschneide, da wir unter 480px ja meist im Hochformat unterwegs sind und dafür auch den "Wichtigen Bereich" nutzen. Das scheint aber nicht wirklich zu gehen.

Das mit der Pixeldicht muss ich mir noch mal anschauen oder hast du da einen Link für mich?

Viele Grüße,
operatorone

[mlweb]

Bei den Links weiß ich gar nicht wo ich anfangen soll. Einfach mal nach "mediaqueries" googeln. Da gibt es unzählige gute Links und praktische Tipps.

Hier vielleicht mal einer https://www.mediaevent.de/css/media-queries.html

Wenn es um Bildausschnitte geht, gibt es aber noch die Eigenschaft background-size mit der man arbeiten kann. https://www.mediaevent.de/css/background-size.html

Kommt halt drauf an was man genau braucht bzw. was im Einzelfall wirklich passend ist. Meisten ist es eine Kombination von beidem.

[mlweb]

es geht schon um Hintergrundbilder. Die wollte ich anders zuschneide, da wir unter 480px ja meist im Hochformat unterwegs sind und dafür auch den "Wichtigen Bereich" nutzen.

Wobei es dort eindeutig nicht um "echte Hintergrundbilder" geht.

[lucina]

Du meinst eher sowas, oder?

https://aclaes.com/responsive-backgr...set-and-sizes/

Nicht trivial. Im Grunde genommen musst Du einen Codeschnispel bauen, der die Ausgabe des <picture>-Elementes in den CSS-Code regelt, und den dann entweder inline, per JS oder per TL_HEAD ausgeben. Kann man machen. Nicht so schön.

[operatorone]

@mlweb: Danke für den Hinweis. Das schaue ich mir gleich mal an.

@lucina: Ja sowas in der Art. Aber das muss ich mir mal in Ruhe anschauen.Vielleicht kann ich ja ein Inhaltselement bauen, was das ableisten kann. Mal sehen.

Viele Grüße,
operatorone

[mlweb]

Ich habe mal kurz in die Erweiterung [full-background-images] reingeschaut. Habe ich zwar noch nie eingesetzt, aber das scheint mir vielleicht (aus dem Bauch heraus) ein möglicher Ausgangspunkt zu sein um die responsiven Bilder von Contao zu verwenden.

[lucina]

Mag sein - ich hatte dazu auch schon einmal page_images verwendet ... ;-)