HTML5背景图片显示大小怎么设置随窗口变化

设置背景图片时,图片不够大产生自动重复,怎么设置图片大小自动随显示窗口的大小而改变

我也被这个问题困扰了很久,后来用background-size:cover;实现了

html5中可以在css样式中使用background-size属性

我也被这个问题困扰了很久,后来用background-size:cover;实现了

设置背景图像的元素需要有大小,才能显示背景图像。改变背景图像大小,可以改变元素大小这个角度入手。代码如下

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style type="text/css">
        div{
            margin: 0 auto;
            padding: 0 0;
            height:200px;
            width: 200px;
            background-size: 100% 100%;
            background-image: url(q.jpg);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div id="ele">
    </div>
    <script type="text/javascript">
        window.onresize=function()
        {
            var ele = document.getElementById('ele')
            ele.style.width=window.innerWidth / 5+"px";
            ele.style.height = window.innerHeight / 5+"px";     
        }
    </script>
</body>
</html>