居中背景图片,使用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