背景图像大小响应设计

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