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