如何在一个div中放置一个(背景)图像?

是否有可能在一个div中的背景图像? 我已经尝试了一切 – 但没有成功:

<div id="doit"> Lorem Ipsum ... </div> //CSS #doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; } 

这可能吗?

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

尝试background-position:center;

编辑: 因为这个问题是越来越多的意见,其值得添加一些额外的信息:

text-align: center将不起作用,因为背景图像不是文档的一部分,因此不属于stream程的一部分。

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

使用背景位置:

 background-position: 50% 50%; 

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

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

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

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

如果精灵表是紧凑的,或者您不想将背景图像置于上述场景之一的中心,则这些解决scheme不适用。

这适用于我:

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

为了居中或定位背景图像,您应该使用background-position属性。 background-position属性从元素的topleft设置背景图像的起始位置。 CSS语法是background-position : xvalue yvalue;

“xvalue”和“yvalue”支持的值是长度单位像px和百分比和方向名称,如左,右等。

“xvalue”是背景的水平位置,从元素的顶部开始。 这意味着如果你使用50px ,它将离开元素顶部“50px”。 “yvalue”是具有相同条件的垂直位置。

所以如果你使用background-position: center; 你的背景图像将被集中。

但我总是使用这个代码:

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

这适用于我:

 .network-connections-icon { background-image: url(url); background-size: 100%; width: 56px; height: 56px; margin: 0 auto; } 

这适用于我:

 <style> .WidgetBody { background: #F0F0F0; background-image:url('images/mini-loader.gif'); background-position: 50% 50%; background-repeat:no-repeat; } </style>