使用CSS定位背景图片 [英] Centering a background image, using CSS

问题描述

我要将背景图片居中。没有使用div，这是 CSS 样式：

  body {
 background-position：center; 
 background-image：url（../ images / images2.jpg）no-repeat; 
} 
  

上面的CSS图块已经完成了居中，没有看到，它只是向上移动。我想做的是使图像居中。

解决方案

  background- image：url（path-to-file / img.jpg）; 
 background-repeat：no-repeat; 
 background-position：center center; 
  / pre> 
 
 
这应该可以工作。
 
 
 
如果没有，为什么不让 div 与图像并使用 z-index 使其成为背景？这将更容易集中比身体上的背景图像。 / p> 
 
 
除此之外：
 
 
 
  background-position：0 100px; / * use一个像素值将它的中心* / 或者我认为如果你设置你的身体 min-height 到100％，你可以使用50％。 
  body {
 
 background-repeat：no-repeat; 
 background-position：中心中心; 
 background-image：url（../ images / images2.jpg）; 
 color：#FFF; 
 font-family：Arial，Helvetica，sans-serif; 
 min-height：100％; 
} 
  
 
I want to center a background image. There is no div used, this is the CSS style:
body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}
The above CSS tiles all over and does center it, but half the image is not seen, it just kind of moves up. What I want to do is center the image. Could I adopt the image to view even on a 21" screen?
解决方案
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
That should work.

If not, why not make a div with the image and use z-index to make it the background? This would be much easier to center than a background image on the body.

Other than that try:

background-position: 0 100px;/*use a pixel value that will center it*/ Or I think you can use 50% if you have set your body min-height to 100%.
body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}


                        
这篇关于使用CSS定位背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！