背景图片尺寸响应式设计

Question

我正在为我的网站创建响应式设计。

我有一个这样的显示标志：

<h1><a href="http://example.com/">example.com</a></h1>

我在 CSS 中显示徽标：

#header h1{
margin-top:23px;
background: url(http://www.example.com/files/logo.jpg) no-repeat !important;
float: left;
text-indent: -9999px

}

我现在为移动访问者和响应式设计创建了一个新的 CSS 文件。

@media (max-width: 480px) { ...

如何根据用户手机/浏览器的宽度调整徽标的大小？我发现了 background-size 属性，但没有成功使用它。

谢谢

Answer 1

试试

header h1 { 
  background: url(http://www.example.com/files/logo.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}