在HTML中调整响应模板的背景图像

我正在练习制作响应式网站我的问题是如何根据网页的分辨率调整图像大小？这里是我的代码：在HTML中调整响应模板的背景图像

<html> 
<head> 
<meta charset="utf-8"> 
<style> 
body { 
    background: url("streetlight.png"); 
    width: 100%; 
    height: 100px; 
    background-attachment: fixed; 
    position: absolute; 
    background-repeat: no-repeat; 
} 
</style> 
</head> 
<body> 

</body> 
</html>

来源

2014-05-21 thenewbie

你看背景图片？或IMG标签？ – ShibinRagh

background-size：100％100％; –

@ShibinRagh背景图片 – thenewbie

试试这个

body{ 
    background: url(streetlight.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

来源

2014-05-21 06:27:29 ShibinRagh

是的，我只是发布此解决方案，因为我也面临类似的问题，而我正在尝试做出响应模板。这就是为什么我记得解决方案 – Nothing

图像适合整个页面，它不基于浏览器的分辨率调整大小。 – thenewbie

在HTML中调整响应模板的背景图像

回答

相关问题