Wordpress：使背景图像具有响应性答案

【问题标题】：Wordpress : Make a background image responsiveWordpress：使背景图像具有响应性
【发布时间】：2014-12-03 09:22:40
【问题描述】：

这是我的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;

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

【问题讨论】：

我不想更改桌面视图的大小，但我想让它完全显示在智能手机模式下。我尝试用包含替换封面，但它也改变了桌面上的大小
使用媒体查询为桌面和移动设备定义单独的规则。
我该怎么做？我需要更改 php 文件中的某些内容吗？

标签： css wordpress image header woothemes

【解决方案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; 
 }
}

【讨论】：