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 回答