如何使标题图像响应？

【问题标题】：How to make Header image responsive?如何使标题图像响应？
【发布时间】：2014-02-17 04:27:21
【问题描述】：

我已将标题图片添加到我的网站：

#header_area {
    background: url('my_header_image.com');
    background-repeat:no-repeat;
    background-position: top center;
}

我的网站除了标题之外都是响应式的。

有没有办法让我的标题响应？

【问题讨论】：

响应式设计并不是真正的 WordPress 问题 ...

标签： css responsive-design

【解决方案1】：

当使背景图像具有响应性时，您可以使用background-size 属性。在上述代码的情况下，只要您的 #header_area 元素具有隐式宽度（或具有媒体查询的显式宽度），您应该可以说：

#header_area {
    background: url('my_header_image.com');
    background-repeat:no-repeat;
    background-position: top center;
    background-size: 100%;
}

【讨论】：