Размер фона: обложка с JQuery

Question

Я разрабатываю сайт Joomla со 100% шириной, которая также отзывчива.

В то же время я использую слайдер (только эффекты затухания) для отображения более одного изображения, но здесь возникает проблема. Первое изображение (происходит из фона CSS), может быть отлично перемещено на мобильных устройствах, но другие (из JQuery) этого не делают.

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

Я пытался использовать этот код, но не работает.

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

Спасибо всем

Answer 1

Проверьте это исправление, на добавление поддержки поведение IE для фона размером до IE8.

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

Answer 2

я сделал что-то подобное для http://WorldViewClock.com, вот что работает для меня:

$(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; 
}