responsive / srcset für background image

Hallo zusammen,

folgendes Problem: ich habe das Template ce_image dahingehend verändert, das es ein zuätzliches div gibt, welches mit dem angegebenen Bild als Hintergrund-Bild gesetzt wird.

PHP-Code:

---

<div class="headerimage" style="background:url(<?= $this->singleSRC ?>) center 30% no-repeat; background-size:cover">

---

Das geht auch fein. Allerdings möchte ich je nach Pixeldichte und Bildschirmgröße die passenden generierten Bilder verwenden. Wie stelle ich das an? Ich weiss, dass die URLs zu den alternativen Bildern im "srcset" abrufbar sind. Gibt es eine Template-Funktion, die mir automatisch je nach Pixeldichte/Skalierunfsfaktor nur die richtige Bild-URL liefert?

Danke und grüße,
Misios

Von Haus aus geht das mit Hintergrund Bildern nicht. Wenn dann müsstest du das mit JavaScript umsetzen.

Das ist leider nicht ganz trival und funktioniert auch nicht überall. Anregung findest Du möglicherweise unter https://css-tricks.com/responsive-images-css/ oder auch unter https://aclaes.com/responsive-backgr...set-and-sizes/.

Javascript dachte ich mir schon.

Hab die Lösung von lucinas Link umgesetzt und es funzt. Zumindest mit kleinen Anpassungen:

Template "ce_image_header";

PHP-Code:

---

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>
    
  <figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
  
      <div class="responsive-background-image"><?php $this->insert('picture_default', $this->picture); ?></div>

  </figure>

<?php $this->endblock(); ?>

---

JS im Seitenlayout:

PHP-Code:

---

class ResponsiveBackgroundImage {

    constructor(element) {
        this.element = element;
        this.img = element.querySelector('img');
        this.src = '';

        this.img.addEventListener('load', () => {
            this.update();
        });

        if (this.img.complete) {
            this.update();
        }
    }

    update() {
        let src = typeof this.img.currentSrc !== 'undefined' ? this.img.currentSrc : this.img.src;
        if (this.src !== src) {
            this.src = src;
            this.element.style.backgroundImage = 'url("' + this.src + '")';

        }
    }
}

let elements = document.querySelectorAll('.responsive-background-image');  
for (let i=0; i<elements.length; i++) {  
  new ResponsiveBackgroundImage(elements[i]);
} 


---

CSS:

HTML-Code:

---

.responsive-background-image {
        background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
          display: inline-block;
        width: 100%;
        height: 700px;
}

.responsive-background-image img {
          display: none;
}

---

Vielen Dank für die Hilfe!

Misios

steh grade for dem gleichen Problem und würd es nur sehr ungern mit javascript lösen. Hat sich da was getan?

Gibt es keine Möglichkeit die IRGENDWIE so in der richtung funktioniert? (Im Template)

$GLOBALS['header'] = '<style> blabla </style>';

Im Body ging es scheinbar ja mal ne Zeitlang mit <style scoped> aber das funktioniert nicht mehr oder? (hab icb jedenfalls nicht hingebracht).