背景图片不包括div

Question

在图片旋转js中，标签background-size不起作用，图片不能覆盖整个div ...有人可以帮助我吗？

<script language="JavaScript" type="text/javascript"> 
$(document).ready(function(){ 

var imgArr = new Array(// relative paths of images 
'imgs/contact/01.png', 
'imgs/contact/03.png', 
'imgs/contact/02.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, 6000); 

/* image rotator */ 
function changeImg(){ 
$('#contact #banner').animate({opacity: 0}, 1000, function(){ 
$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat','background-attachment', 'fixed','background-size','cover'); 
}).animate({opacity: 1}, 1000); 
} 

}); 
</script> 

我不知道是否对JS的CSS做得很不错，右侧写...

的HTML：

<div id="contact"> 
    <div id="banner" style="background-size: cover;"></div> 
</div> 

的CSS：

#contact { 
      background: #fff; 
      width: 100%; 
      height: 950px; 
     } 
#contact #banner { 
      background: url('imgs/contact/01.png') center center no-repeat; 
      background-size: cover; 
      background-position-y: 40%; 
      width: 100%; height: 500px; margin-top: -50px; 
     } 

https://jsfiddle.net/87z5p17e/

Answer 1

将height:100%;添加到#banner元素，因为#banner具有的height: 500px;小于其父项（#contact height:950px;）。

Jsfiddle

#contact #banner { 
    background: url('http://www.barrymellorphotography.co.uk/assets/Uploads/landscapes-13.jpg') center center no-repeat; 
    background-size: cover; 
    background-position-y: 40%; 
    width: 100%; 
    // height: 500px; 
    height: 100%; 
    margin-top: -50px; 
}