Zitat von
swinde
Das Modul
terminal42/contao-pageimage ist vorrangig dafür gemacht, um jeder Seite der Webseite ein eigenes Bild zu ordnen zu können. So benutze ich das Modul jedenfalls immer.
Wenn du für verschiedene Bildschirmgrößen das Hintergrundimage austauschen willst, wäre meiner Meinung eine direkte Anweisung in der CSS Datei mit Media Query besser zu handhaben.
So z.B.
Code:
html{
background-image: url("dein-pfad/bg-image-mobil.png") no-repeat left top;
background-size: cover;
background-position: top;
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
html{
background-image: url("dein-pfad/bg-image-tablet.png") no-repeat left top;
}
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
html{
background-image: url("dein-pfad/bg-image-pc.png") no-repeat left top;
}
}
Die Hintergrundbilder werden vom Bildformat an die Devices angepasst und ja auch eigentlich nie wieder geändert.
Steffen Winde
Hi swinde
Also die Standard mod_background_image.html5 sieht ja so aus:
PHP-Code:
<?php if ($this->useCss): ?>
<style>
html {
background: url("<?php echo specialchars($this->src); ?>") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<?php else: ?>
<script>
(function (window, document){
"use strict";
var container, image, imgWidth, imgHeight;
image = document.createElement('img');
image.style.maxWidth = 'none'; // override Contao CSS framework
image.onload = function() {
imgWidth = this.width;
imgHeight = this.height;
fillBg();
if (window.addEventListener) {
window.addEventListener('resize', fillBg, false);
} else if (document.attachEvent) {
document.attachEvent('resize', fillBg);
}
}
image.src = '<?php echo specialchars($this->src); ?>';
container = document.createElement('div');
container.cssClass = 'background-image';
setStyles(container, {
'position': 'fixed',
'overflow': 'hidden',
'top': 0,
'left': 0,
'width': '100%',
'height': '100%',
'z-index': '-1'
});
container.appendChild(image);
document.body.insertBefore(container, document.body.firstChild);
function fillBg() {
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var newWidth = windowWidth;
var newHeight = (windowWidth / imgWidth) * imgHeight;
var topMargin = ((newHeight - windowHeight) / 2) * -1;
var leftMargin = 0;
if (newHeight < windowHeight) {
newWidth = (windowHeight / imgHeight) * imgWidth;
newHeight = windowHeight;
topMargin = 0;
leftMargin = ((newWidth - windowWidth) / 2) * -1;
}
setStyles(image, {
'height': (newHeight + 'px'),
'width': (newWidth + 'px'),
'marginLeft': (leftMargin + 'px'),
'marginTop': (topMargin + 'px')
});
}
function setStyles(el, styles) {
for (var rule in styles) {
el.style[rule] = styles[rule];
}
}
}(window, document));
</script>
<?php endif; ?>
Kann ich das CSS im Template direkt anpassen ???? Weil das Background Image müsste ja im CSS so aus sehen:
Code:
background: url("<?php echo specialchars($this->src); ?>") no-repeat center center fixed;
Weisst Du swinde unter dev.nakedfacts.ch in der Desktop Ansicht funktioniert alles einwandfrei so wie es soll (das Background Image ist fixiert, beim scrollen wird das Background Image überdeckt) nur auf den Tablets/Smartphones will das einfach nicht funktionieren.
contao-pageimage
Zitieren
Lesezeichen