Html CSS：如何在固定宽度、居中div的背景中显示图像？

我写了一个网页，其中内容位于固定宽度的中间div内，如下所示：

<div style='width:800px; margin: -5px auto 0px auto;' >    
This is a fixed-width centered div!
</div>

这是一个以固定宽度为中心的div！

一切都很好，直到我被要求在div中放置一个背景图像。使用CSS background不可避免地会导致图像被拉伸或平铺。我不想那样。我想要一个图像实例，其左上角位于固定宽度div的左上角

我尝试了几种方法

以下是第一种不起作用的方法：

<img src='images/background.jpg' alt='background'
 style='position:relative;left:0;top:0;z-index:-1' />

<img src='images/background.jpg' alt='background'
 style='position:absolute;left:0;top:0;z-index:-1' />

在本例中，图像的位置完全符合我的要求，但div的文本显示在图像下方

第二种方法不起作用：

<img src='images/background.jpg' alt='background'
 style='position:relative;left:0;top:0;z-index:-1' />

<img src='images/background.jpg' alt='background'
 style='position:absolute;left:0;top:0;z-index:-1' />

使用绝对定位，文本将根据需要显示在图像上。但是，图像现在位于页面的左上角。这是意料之中的，因为没有其他元素具有绝对定位。我知道解决方案应该是将固定宽度中心div的位置也设置为绝对。但是，执行此操作时，固定宽度div不再居中：

我的div不再居中！ 如何编写HTML和CSS，使文本在固定宽度内，以div为中心，文本后面有一个背景图像

使用CSS背景不可避免地会导致图像被拉伸 或者铺瓷砖

是，背景图像重复-默认情况下。但是，您可以显式设置为

no repeat

<div style='width:800px; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >    
This is a fixed-width centered div!
</div>

这是一个以固定宽度为中心的div！

[编辑]垂直剪裁可以通过将div设置为图像的像素高度来解决。这将确保您的div始终至少与您的图像一样高。这是理想的解决方案

---

但是，如果您的图像比div的800px静态宽度宽，则需要返回嵌套图像解决方案。。。使div

position:relative

和图像

position:absolute

，图像的顶部/左侧将相对于div而不是页面。与图像上的

-1

相结合，您应该准备好了（）

您可以使用速记配置

背景

属性：

background: <background-color> url(<background-image>) <background-position-x> <background-position-y> <background-repeat>;

background:url（）；

详情如下:

<div style='position:fixed; width:800px; margin: -5px auto 0px auto; border: 2px solid #ccc; height: 5em; background: rgba(255,255,255,0.5) url(http://davidrhysthomas.co.uk/img/dexter.png) 0 0 no-repeat;'>    
This is a fixed-width centered div!
</div>

这是一个以固定宽度为中心的div！

参考：

您可以使用“溢出：可见”来确保图像不会被裁剪

<div style='width:800px; overflow: visible; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >    
This is a fixed-width centered div!
</div>

这是一个以固定宽度为中心的div！

或者，尝试使div的“最小高度”与图像的高度相同。我在下面的示例中使用了300px，但是您应该将其更改为图像的任何大小

<div style='width:800px; min-height: 300px; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >    
This is a fixed-width centered div!
</div>

这是一个以固定宽度为中心的div！

+1：这与我想要的非常接近，它可以处理div大于图像的情况。但是，只要div小于图像，此代码就会导致图像被裁剪。@antisanity，感谢使用

background repeat

CSS的回答。我仍然有兴趣知道是否有一种方法可以将CSS定位与

img

标记一起使用。我相信，这将是一个伟大的事情，能够用于未来的努力。