背景图像不覆盖 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;
}