PHP-Code:
<?php $this->extend('block_searchable'); ?>
<?php $this->block('content'); ?>
<figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
<?php
$bilderArray = explode ( "," , $this->picture['img']['srcset']);
?>
<div class="insidePicture"
style="background-image: url(../<?php echo(str_replace(" 1x", "", $bilderArray[0]));?>);
background-image: -webkit-image-set(url(../<?php echo(str_replace(" 1x", "", $bilderArray[0]));?>) 1x,
url(../<?php echo(str_replace(" ", "", str_replace(" 0.5x" , "", $bilderArray[1]))); ?>) 0.5x,
url(../<?php echo(str_replace(" ", "", str_replace(" 2x" , "", $bilderArray[2]))); ?>) 2x,
url(../<?php echo(str_replace(" ", "", str_replace(" 3x" , "", $bilderArray[3]))); ?>) 3x);
background-image: -moz-image-set(url(../<?php echo(str_replace(" 1x", "", $bilderArray[0]));?>g) 1x,
url(../<?php echo(str_replace(" ", "", str_replace(" 0.5x" , "", $bilderArray[1]))); ?>) 0.5x,
url(../<?php echo(str_replace(" ", "", str_replace(" 2x" , "", $bilderArray[2]))); ?>) 2x,
url(../<?php echo(str_replace(" ", "", str_replace(" 3x" , "", $bilderArray[3]))); ?>) 3x);
background-image: -o-image-set(url(../<?php echo(str_replace(" 1x", "", $bilderArray[0]));?>) 1x,
url(../<?php echo(str_replace(" ", "", str_replace(" 0.5x" , "", $bilderArray[1]))); ?>) 0.5x,
url(../<?php echo(str_replace(" ", "", str_replace(" 2x" , "", $bilderArray[2]))); ?>) 2x,
url(../<?php echo(str_replace(" ", "", str_replace(" 3x" , "", $bilderArray[3]))); ?>) 3x);
background-image: -ms-image-set(url(../<?php echo(str_replace(" 1x", "", $bilderArray[0]));?>) 1x,
url(../<?php echo(str_replace(" ", "", str_replace(" 0.5x" , "", $bilderArray[1]))); ?>) 0.5x,
url(../<?php echo(str_replace(" ", "", str_replace(" 2x" , "", $bilderArray[2]))); ?>) 2x,
url(../<?php echo(str_replace(" ", "", str_replace(" 3x" , "", $bilderArray[3]))); ?>) 3x);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat:no-repeat;
">
<?php if ($this->href): ?>
<a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
<?php endif; ?>
<?php //$this->insert('picture_default', $this->picture);
//print_r($this);
?>
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<figcaption class="caption"><?= $this->caption ?></figcaption>
<?php endif; ?>
</div>
</figure>
<?php $this->endblock(); ?>
Jetzt stehe ich aber gerade vor einer Denkaufgabe wo ich nicht weiter komme. Das Bild wird ja in einem Div mit eingefügt, welches natürlich nicht der "body" ist. Jetzt frage ich mich wie ich das Problem lösen kann, damit das Bild im Hintergrund auf 100% breite und höhe angezeigt werden kann. Ich habe das Template für eine OnePage Website erstellt, in der ich 5 Seiten über ein andere habe.
Lesezeichen