你如何将背景图像居中？

Question

我在看http://www.hideoutfestival.com/

当您调整屏幕大小时，标题背景图片会一直居中。

我似乎无法复制这种效果。

我有：

<div id="cover" style="background:url(/design/cover.jpg) repeat-x top">
</div>

和

#cover {
    height:450px;
    width:100%;
background-position: center;
}

然而，我似乎无法像他们那样产生同样的效果。

任何帮助？

此致 汤姆

Answer 1

内联CSS覆盖外部CSS。 CSS中设置的任何背景属性都会被您的内联规则覆盖。

更改它以使背景位于内联：

background:url(/design/cover.jpg) repeat-x center center;

或者更改它，以便只在元素上定义图像：

background-image:url(/design/cover.jpg);

或者将其移至样式表（真正应该这样做）。

Answer 2

我认为你的内联样式中的背景位置可能会覆盖你的CSS。 尝试使用background-image: url(/design/cover.jpg);内联并使用此CSS：

#cover {
    height:450px;
    width:100%;
    background-repeat: x
    background-position: center top;
}

或者将整个内容放入样式表中是一个更好的主意，但我假设您有理由将其内联。如果您决定这样做，这应该有效：

#cover {
    height:450px;
    width:100%;
    background-repeat: url(/design/cover.jpg) repeat-x center top;
}