如何使標題圖像響應？

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