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
Lesezeichen