使用CSS使背景图像居中

我想将背景图像居中。没有使用div，这是样式：

上面的CSS平铺在整个图像的中心，但是有一半的图像看不到，它只是向上移动。我要做的是将图像居中。即使在21英寸的屏幕上也可以查看图像吗？

试试看

background-position: center center;

这应该行得通

如果不是，为什么不在图像上做一个

div

，并使用

z-index

将其作为背景？这比在身体上的背景图像更容易居中

除此之外，请尝试：

背景位置：0 100px；/*使用将其居中的像素值*/

或者如果您已将身体

最小高度设置为100%，我认为您可以使用50%

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%;
}

代码中有错误。您在背景图像属性上混合使用了完整语法和速记符号。这会导致忽略“无重复”，因为它不是背景图像属性的有效值

body{   
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

应成为以下内容之一：

body{
    background:url(../images/images2.jpg) center center no-repeat;
}

或

编辑：对于您的图像“缩放”问题，您可能需要查看。
我使用此代码，效果很好

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;
} 

使用html 4.01“STRICT”doctype时，不垂直居中背景图像

添加：

background-attachment: fixed;

应该解决这个问题

（所以亚历山大是对的）
如果您对以上答案不满意，请使用此选项

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

唯一对我有用的是

margin: 0 auto

也有同样的问题。使用了显示和边距属性，效果很好

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

简单地替换

background-image:url(../images/images2.jpg) no-repeat;

与

像这样：

background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;


html{
身高：100%
}
身体{
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
}
如果没有

background-attachment: fixed;

在x轴和y轴上使用居中图像

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

双中心是怎么工作的？不管怎么说，它并不能解决问题，还是解决问题same@Jean：看规格，背景位置实际上可以取2个值（水平和垂直）。@rob它不工作，图像是平铺的。图像是1600x1200，我的屏幕大小是1280x800@Jean您还不能调整背景图像的大小。在CSS 3中这是可能的，但还没有得到足够广泛的支持。
居中
与
背景重复：不重复
应该做你要求的事情-居中图像。@Jean ahh，我现在从你的屏幕截图中看到了。你需要给
主体
一个
最小高度
100%
，这样它就可以扩展到整个空间全屏。这可能会对它进行排序。现在这取决于图像的大小和浏览器的大小，不是吗？@nikc+1，我知道，但需要知道是否有一个解决方案它会集中，但只显示一半屏幕，我希望stackoverflow可以选择附加屏幕快照。您可以制作一个屏幕快照并将其上载到您的服务器或photobucket.com等免费图片托管网站，或在www.jsfiddle.net上做一个临时示例，并为我们发布一个链接。根据您所说的，图像是1600x1200，大多数屏幕分辨率没有那么高，请尝试调整图像大小以适应。例如，我使用1440x900的宽屏显示器。屏幕截图-我不确定如何上传im对于JSFIDLE，如果您可以帮助我向JSFIDLE添加一个映像，只需使用完整的http路径EX:
background image:url(http://www.myurl.com/images/image.jpg)
将其放在CSS中。我没有服务器来做这件事，但使用了一个imagehosting站点，但现在仍然可以查看它的背景：url（../images/images2.jpg）center no repeat；'不起作用，因为语法错误，其他的也不起作用Hanks！我甚至不知道webkit等有不同的声明…嘿Victor，我经常使用你的代码，但现在看起来不起作用。我添加了背景附件：已修复；但它在我的iPad浏览器上不起作用…仅
-webkit背景大小
存在于特殊声明中。background-attachment为我解决了这个问题；）
background-image:url(../images/images2.jpg) no-repeat;

background:url(../images/images2.jpg)  center;

background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;

background-position: center center;

background-attachment: fixed;

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