在页面刷新时使用Javascript更改背景图像-响应？

我不熟悉javascript，但我目前在head标记中使用javascript，在页面刷新时随机更改图像。这一直很有效。下面可以看到javascript

<script  type="text/javascript">
    function changeImg(imgNumber)   {
        var myImages = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]; 
        var imgShown = document.body.style.backgroundImage;
        var newImgNumber =Math.floor(Math.random()*myImages.length);
        document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
    }
    window.onload=changeImg;

现在，我想更进一步，使图像响应。我通过媒体查询尝试了许多不同的标签，但似乎没有什么能100%起作用。这个特殊的页面有一个顶部区域，高度为310px，这也是显示图像的地方——它们的高度也为310px。这是我可以用CSS或CSS3做的吗？或者我需要添加额外的javascript

---

提前谢谢你的帮助。。。我的脑子疼

在css中，尝试body{background size:cover}谢谢，@Adeneo。我已经试过了，没有任何改变。这些图像仅位于页面的第一部分，以div first标记。您是否建议我在javascript中将“body”替换为“first”？