17

Trying to get full size background image with:

html {
    height: 100%;
    background:url('../img/bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

It's showing the background image with correct width but height gets stretched. I tried various options like

html {
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;

}

removing height: 100%

but none of them worked.

4

6 に答える 6

7

カバーの代わりにcontainを試してから、中央に配置します。

background-size: contain;
background-position: center;
于 2012-12-27T18:39:26.533 に答える
2

より良い解決策は、軽量の jQuery プラグインを使用して、背景のサイズをブラウザー サイトに合わせて動的に変更することです。私が本当に気に入っているのは backstretch.js です。実装は非常に簡単です。

于 2012-12-27T19:14:42.270 に答える
0

HTML ではなくボディをセレクターとして使用する必要があります。これにより、マークアップで問題が発生します。あなたのコードは以下の通りです：

html {
    height: 100%;
    background:url('../img/bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

私は次のようなことを試みます：

body {
    background:url('../img/bg.jpg') no-repeat 50% 0 fixed;
    margin: 0 auto;
}

画像のサイズを指定する必要はありません。

于 2012-12-27T19:19:04.703 に答える