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

Question

我是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吗？

先谢谢你的帮助......我的大脑受伤了！