html - 背景图像大小响应式设计

Question

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

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

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

然后我在 CSS 中显示 Logo :

#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) { ...

如何根据用户手机/浏览器的宽度调整 Logo 的大小？我发现了 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;
}