如何使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%;
}