css - Wordpress：使背景图像响应

Question

这是我的wordpress：http ://shopmanouchek.com

如果您在桌面模式下查看它，一切正常，但在智能手机模式下出现问题。标题图像没有响应。

这是徽标的代码：

#header{
background-image: url(http://img15.hostingpics.net/pics/989373manouchekc.png);
background-repeat: no-repeat;
background-position: center; 
}

我试图添加

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

在我的手机上看起来不错，但现在桌面视图中的徽标现在完全超大了

Answer 1

Salman A 上面已经提到了媒体查询，这里有一个简短的概述http://css-tricks.com/css-media-queries/

以及如何在实践中发挥作用的示例

#header {
  background-image: url(http://img15.hostingpics.net/pics/989373manouchekc.png);
  background-repeat: no-repeat;
  background-position: center; 
}

@media all and (max-width: 480px) /*or whatever width you want the change to take place at*/ {
  #header {
   -webkit-background-size: cover; 
   -moz-background-size: cover; 
   -o-background-size: cover; 
   background-size: cover; 
 }
}