0

ヘッダーとフッターの背景が別々になっているWebサイトのレイアウトを作成しようとしています。だからこれは基本的に私が行う方法です：

body{
    background: url(images/header.png) top center no-repeat,
            url(images/footer2.png) bottom center no-repeat,
                url(images/bg.jpg) fixed;
    background-size: contain, contain, auto;
}

これを選択する理由は、（本文ではなく）ヘッダーとフッターに背景を適用すると、背景が画面の幅をカバーできないためです。ただし、このバグがあります。ズームインまたはズームアウトすると、コンテンツのサイズのみが変更され、背景のサイズは下のスクリーンショットのように同じままです。 ここに画像の説明を入力してください

この場合の最良の解決策は何でしょうか？私は純粋なCSSソリューションを探しています（HTMLマークアップを変更する必要はありません）。私を助けてくれてありがとう。

4

1 に答える 1

0

あなたの問題は、containバックグラウンド定義での使用です。これにより、画像のサイズがボディと同じ大きさに保たれ、ボディはフルサイズのままになります。

no-repeat の代わりに repeat-x を使用してみて、background-size の width 部分をヘッダー要素の幅と同じ値に設定してください。

何かが欠けていない限り、それは一致するようにスケーリングする必要があります。

于 2012-10-03T17:48:26.407 に答える