css - ヘッダー画像をレスポンシブにする方法は?

Question

サイトにヘッダー画像を追加しました:

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

私のサイトは、ヘッダーを除いてレスポンシブです。

ヘッダーをレスポンシブにする方法はありますか?

Answer 1

background-image をレスポンシブにする場合は、background-sizeプロパティを使用できます。上記のコードの場合、#header_area要素に暗黙的な幅 (またはメディア クエリで設定された明示的な幅) がある限り、次のように言えます。

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