Background-size: cover with jQuery

Question

I am developing a Joomla website with a 100% width, which also is responsive.

At the same time I'm using a slider (just fading effects) for showing more than one image, but here comes the problem. The first image (comes from the CSS background), can be displayed perfectly on mobile, but the other ones (which comes from jQuery) do not.

JS

$(document).ready(function(){
    var imgArr = new Array(
        'imatgesheader/fons2.jpg',
        'imatgesheader/fons3.jpg'
    );
     
    var preloadArr = new Array();
    var i;
     
    /* preload images */
    for(i=0; i < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }
     
    var currImg = 1;
    var intID = setInterval(changeImg, 100);
     
    /* image rotator */
    function changeImg(){
        $('#gk-header').animate({opacity: 0.05}, 2000, function(){
            $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') ');
        }).animate({opacity: 1}, 1000);
    }
});

CSS Style

    #gk-header {
      background-image: url('../images/fons.jpg') ;
      background-size: cover;
      -moz-background-size: cover;  
      background-position: center; 
      margin-bottom:32px;
      padding:130px 0;
      -webkit-box-shadow:inset 0 0 3px #ebebeb;
      -moz-box-shadow:inset 0 0 3px #ebebeb;
      -ms-box-shadow:inset 0 0 3px #ebebeb;
      -o-box-shadow:inset 0 0 3px #ebebeb;
      box-shadow:inset 0 0 3px #ebebeb;
      z-index: 1;
    }

HTML

    <section id="gk-header">
        <div class="container-fluid">
            <jdoc:include type="modules" name="header" style="none" />
        </div>
    </section>

CLUE

I've tried to use this code, but does not work either.

 $(this).css('background-size','cover','url(' + preloadArr[currImg++%preloadArr.length].src +') ');

score 0 · Answer 1 · answered Oct 23 '13 at 13:27

0

Check this fix, An IE behavior adding support for background-size to IE8.

https://github.com/louisremi/background-size-polyfill

answered Oct 23 '13 at 13:27

dyaa

1,440
18
43

Hey @Dyaa I solved it few months ago just modifying all the presets incoming from CSS – Xavi Alsina Oct 23 '13 at 17:41

score 0 · Answer 2 · answered Dec 06 '13 at 00:06

I did something similar for http://WorldViewClock.com, here's what worked for me:

$(obj).css('background', 'url(https://s3.amazonaws.com/WVCRepo/w/' + locs[i] + '/1080/' + count[i] + '.jpg) no-repeat center center fixed');

#bgWrapper, #bgWrapper div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#bgWrapper {
.bgImg {
    -webkit-background-size: cover !important;
     -moz-background-size: cover !important;
         -o-background-size: cover !important;
                background-size: cover !important;
}

Background-size: cover with jQuery

2 Answers2