将背景图片添加到 div（动态内容）答案

【问题标题】：Add background images to div (Dynamic content)将背景图片添加到 div（动态内容）
【发布时间】：2011-05-23 18:30:45
【问题描述】：

我有一个 DIV ...

<div id="content">

</div>

现在...在设计中，如果您认为它是一个矩形，顶部是页眉，页脚也不同，所以我不能只创建一个 1px 背景图像并重复它。

我必须这样做：

<div id="content">
<div id="header">This will have a fixed bg image</div>
<div id="body-content">This will have a repeated bg image and it's the part that can grow.</div>
<div id="footer-content">THis will content a fixed bg image for the footer</div>
</div>

谁能告诉我处理这种设计CSS的最佳方法吗？

【问题讨论】：

不要使用 1px 背景图片，而是使用 >=4px 背景图片以获得更好的浏览器性能。
页眉和页脚是否固定大小（高度）？
是的，固定大小的高度和宽度。唯一会扩大的是中间区域。

标签： html css

【解决方案1】：

#header
{
   background-image: url('header.png');
   background-repeat: no-repeat;
}

#body
{
   background-image: url('body.png');
   background-repeat: repeat-y;
}

#footer
{
   background-image: url('footer.png');
   background-repeat: no-repeat;
}

【讨论】：

另外，您需要设置#header 和footer divs 的height 和width，因为背景图像不会用于计算div尺寸。如果未明确设置，图像可能无法正常显示。
并且，确保 background-image: url('XXXX.png'); 使用相对于 .css 文件的路径。在上面，图像需要在同一个文件夹中。