1

背景画像を縦に伸ばしてページの中央に配置したい。

簡単だと思っていたのですが、どうにも中央に配置できないようです。ここに私のCSSコードがあります:

HTML

<div id="background">
    <img src="bkg.jpg" class="stretch" />
</div>

CSS

#background {
    width: auto;
    height: 100%;
    position: fixed;
    z-index: -999;
}

.stretch {
    width: auto;
    height: 100%;
}

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #525252;
}

この背景を中心に置く方法について何かアイデアはありますか? これで左揃えになりました。ありがとう！

4

2 に答える 2

2

これはあなたが望むように機能します。

画像を垂直方向に引き延ばし、中央に配置します。

ここでjsFiddle

body {
    margin:0px;
    background-color: #525252;
}

#background {
    width: 100%;
    height: 100%;
    position: fixed;
    background: url('bk.jpg') center / auto 100% no-repeat;
}

または、古いブラウザーのサポートが必要な場合は、このjsFiddle ソリューションを参照してください。imgを介して画像を設定するのではなく、タグを使用しbackground-imageます。

于 2013-10-01T21:39:06.157 に答える
0

これをやってみてください:-

body {
    margin: 0px auto;
    width:1000px;
    background-color: #525252;
}

また

この場合、" position: fixed;" を削除する必要があります:

#background {
    height: 100%;
    z-index: -999;
    margin: 0px auto;
    width:1000px;
}

body または DIV に一定の幅を与える必要があります。

お役に立てれば！

于 2013-10-01T21:26:38.027 に答える