Question

我希望将背景图像垂直拉伸并放置在页面的中心。

我认为这很简单，但似乎我不能以任何方式集中它。这是我的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;
}

您是否有任何想法如何让这个背景居中？它现在与左边对齐。谢谢！

Answer 1

这可以达到你想要的效果。

垂直拉伸图像并将其置于中心。

jsFiddle here

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

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

或者，如果您希望支持旧版浏览器，请参阅此jsFiddle solution。它使用img标记，而不是通过background-image设置图片。

Answer 2

尝试这样做： -

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

OR

在这种情况下，您需要删除“position: fixed;”：

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

你需要为身体或DIV提供一些固定的宽度。

希望这有帮助！

垂直拉伸的背景与中心对齐

2 个答案: