css - 如何使标题图像响应？

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%;
}