html - 在 html 中为响应式模板调整背景图像的大小

标签 html css image

<分区>

我正在练习制作一个响应式网站,我的问题是如何根据网页的分辨率调整图像的大小? 这是我的代码:

<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>

最佳答案

试试这个

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;
}

关于html - 在 html 中为响应式模板调整背景图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23775514/

相关文章:

html - Bootstrap 3 轮播不工作

javascript - 在 Rails 应用程序的移动尺寸屏幕中将图像导航元素对齐为 2 行

javascript - 为什么 Inputmask 无法正确处理日期?

html - 如何在 rails 3 中安全地显示包含所有 html/css 的用户文本

javascript - 我是网页设计新手 - 这个系统能用吗?

objective-c - 投影 GIF 文件大小的算法或数学?

html - 使用css居中对齐文本

ios - 导航栏背景图片的 iOS 规范/指南是什么?

html - 垂直对齐嵌套 div 的简单方法?

java - 如何使用 Struts2 中 Action 类的数组填充 SelectBox?