Question

I just discovered the CSS3 background-size:cover attribute. Now I would like to replace this background image by a slideshow (e.g. jQuery cycle), without losing the automatic scaling done by the browser. Is there a simple solution for this?

I found this answer, which probably contains a solution, but I am not quite sure how to adjust it. I tried to copy and paste the code below, but nothing cycles…

jQuery.noConflict();

jQuery(document).ready(function($) {
    $(function() {
        $("#home").loadBGImage();
        setInterval('$("#home").loadBGImage()', 5000); 
    });

    $.fn.loadBGImage = function() {
        var images = ["background1.jpg",
        "background2.jpg",
        "background3.jpg",
        "background4.jpg" ];

        var image = images[Math.floor(Math.random() * images.length)];

        return this.each(function() {
            var $obj = $(this);
            $obj.fadeOut(500,function() {
                $obj.css('background', 'url(../images/' + image + ')')
                    .fadeIn(500);
            });
        });
    };

});

Answer 1

Okay than the problem is you have used jQuery.noConflict(); So in that case all $ must be replaced with jQuery, like below

jQuery.noConflict();

jQuery(document).ready(function(jQuery) {
 jQuery(function() {
    jQuery("#home").loadBGImage();
    setInterval('jQuery("#home").loadBGImage()', 5000); 
 });

 jQuery.fn.loadBGImage = function() {
    var images = ["background1.jpg",
    "background2.jpg",
    "background3.jpg",
    "background4.jpg" ];

    var image = images[Math.floor(Math.random() * images.length)];

    return this.each(function() {
        var $obj = jQuery(this);
        $obj.fadeOut(500,function() {
            $obj.css('background', 'url(../images/' + image + ')').fadeIn(500);
        });
    });
 };

});