如何使Header图像响应？

Question

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

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

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

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

Answer 1

在使背景图像响应时，您可以使用background-size属性。对于上面的代码，只要您的#header_area元素具有隐式宽度（或使用媒体查询显式设置），您应该能够说：

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