你如何居中一个背景图像div？

我在看http://www.hideoutfestival.com/你如何居中一个背景图像div？

当您调整屏幕大小时，标题背景图像不断居中。

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

我：

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

而且

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

但我似乎无法有同样的效果，因为他们做的。

任何帮助？

问候，汤姆

来源

2013-04-08 Tom

我认为你的内联样式中的背景位置可能会覆盖你的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; 
}

来源

2013-04-08 17:01:34 Bill

嗯。这仍然不起作用。看到这里的网站：http://bit.ly/10zWyvZ – Tom 2013-04-08 17:05:12

Dud链接 - 但如果你的意思是http://festifinder.com/design/那么它似乎为我工作 - 虽然你应该添加['background-size：覆盖]（http://www.css3.info/preview/background-size/），以便覆盖整个背景。 – Bill 2013-04-08 17:10:17

必须清除我的缓存！菜鸟的错误。感谢您的帮助 – Tom 2013-04-08 17:13:20

内联CSS将覆盖外部CSS。在CSS中设置的任何背景属性均由内联规则覆盖。

要么改变它，因此背景定位在线：

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

或改变它，这样就在图像元素的定义：

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

或将它移到您的样式表（这你真的应该做）。

来源

2013-04-08 17:01:19

嗯。这仍然不起作用。在这里看到的网站：http://bit.ly/10zWyvZ – Tom 2013-04-08 17:08:26

哪一部分是不正确的工作？似乎正在为我工作.. – 2013-04-08 17:11:22

道歉，工作正常。感谢您的帮助 – Tom 2013-04-08 17:13:54

你如何居中一个背景图像div？

回答

相关问题