如何在div中居中(背景)图像？

Question

是否可以将背景图像置于div中？我几乎尝试过所有事情 - 但没有成功:

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

这可能吗？

Answer 1

#doit {
    background: url(url) no-repeat center;
}

Answer 2

尝试 background-position:center;

编辑:因为这个问题得到了很多观点,值得添加一些额外的信息:

text-align: center 将无法工作,因为背景图像不是文档的一部分,因此不是流程的一部分.

background-position:center是简写background-position: center center; (background-position: horizontal vertical);

Answer 3

使用背景位置:

background-position: 50% 50%;

Answer 4

如果您的背景图像是垂直对齐的精灵表,您可以像这样水平居中每个精灵:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

如果您的背景图像是水平对齐的精灵表,您可以像这样垂直居中每个精灵:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

如果您的精灵表是紧凑的,或者您没有尝试将您的背景图像置于上述场景之一的中心,则这些解决方案不适用.

Answer 5

要居中或定位背景图像，应使用background-positionproperty。background-position属性设置元素背景top和left元素侧面的背景图像的起始位置。CSS语法为background-position : xvalue yvalue;。

支持的“ xvalue”和“ yvalue”值是长度单位，例如px和百分比以及方向名称，例如left，right等。

“ xvalue”是背景的水平位置，从元素的顶部开始。这意味着，如果您使用50px它，则距元素顶部至少50px。而“ yvalue”是具有相同条件的垂直位置。

因此，如果您使用background-position: center;背景图像，则图像将居中。

但是我总是使用以下代码：

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

我知道这是如此令人困惑，但这意味着：

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

而且我也知道这background-size是一个新属性，在压缩代码中什么是，/cover但是这些代码意味着fillWindows桌面背景中的背景大小和位置。

你可以看到更多的细节background-position在这里和background-size在这里。

Answer 6

这对我有用:

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}