居中背景图片,使用CSS

我想要中心背景图像。 没有使用div,这是CSS样式:

body{ background-position:center; background-image:url(..http://img.dovov.comimages2.jpg) no-repeat; } 

上面的CSS瓷砖遍布整个中心,但一半的图像是看不到的,它只是一种向上移动。 我想要做的是以图像为中心。 即使在21英寸的屏幕上,我也可以采用图像来观看吗?

 background-image: url(path-to-file/img.jpg); background-repeat:no-repeat; background-position: center center; 

这应该工作。

如果没有,为什么不使用图像创builddiv ,并使用z-index使其成为背景? 这将比在身体上的背景图像更容易居中。

除此之外,尝试:

background-position: 0 100px;/*use a pixel value that will center it*/或者我认为如果将身体的min-height为100%,则可以使用50%。

 body{ background-repeat:no-repeat; background-position: center center; background-image:url(..http://img.dovov.comimages2.jpg); color:#FFF; font-family:Arial, Helvetica, sans-serif; min-height:100%; } 

我使用这个代码,它工作很好

 html, body { height: 100%; width: 100%; padding: 0; margin: 0; background: black url(back2.png) center center no-repeat;; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

我想这是想要的:

 body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } 

尝试

 background-position: center center; 

你的代码有错误 您正在使用background-image属性上的完整语法和简写符号的混合。这将导致无重复被忽略,因为它不是background-image属性的有效值。

 body{ background-position:center; background-image:url(..http://img.dovov.comimages2.jpg) no-repeat; } 

应成为下列之一:

 body{ background:url(..http://img.dovov.comimages2.jpg) center center no-repeat; } 

要么

 body { background-image: url(path-to-file/img.jpg); background-repeat:no-repeat; background-position: center center; } 

编辑:对于你的形象“缩放”的问题,你可能想看看这个问题的答案 。

 background-repeat:no-repeat; background-position:center center; 

当使用html 4.01'STRICT'文档types时,不会垂直居中背景图像。

添加:

 background-attachment: fixed; 

应该解决这个问题

(所以亚历山大是对的)

试试这个background-position: center top;

这将为你做的伎俩。

如果你不满意上面的答案然后使用这个

  * {margin: 0;padding: 0;} html { height: 100%; } body { background-image: url("background.png"); background-repeat: no-repeat; background-position: center center; background-size: 80%; } 

有同样的问题。 使用的显示和保证金属性,它的工作。

 .background-image { background: url('yourimage.jpg') no-repeat; display: block; margin-left: auto; margin-right: auto; height: whateveryouwantpx; width: whateveryouwantpx; } 

只需更换

 background-image:url(..http://img.dovov.comimages2.jpg) no-repeat; 

 background:url(..http://img.dovov.comimages2.jpg) center; 

唯一对我有用的是..

 margin: 0 auto