<?php if ($this->useCss): ?>
<style>
    html {
        background-image: url("<?= StringUtil::specialchars($this->src) ?>");
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
    }

    <?php foreach ($this->mediaQueries as $mediaQuery): ?>

    @media <?= $mediaQuery['mq'] ?> {
        html {
            background-image: url("<?= StringUtil::specialchars($mediaQuery['src']) ?>");
        }
    }

    <?php endforeach ?>

</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; ?>
