如何使用CSS在DIV标签上添加背景图像

Question

我试图用背景图片设置我的DIV，但它不适合我。图像根本没有显示出来。我似乎无法弄清楚我做错了什么。

这是我的代码：

<div id="main_wrapper">
        <div id="main_content">
        </div>
</div>

在上面的代码中，ID为"main_wrapper"的DIV，我希望我的图像使用填充屏幕的100％，以及ID为{的DIV { {1}}我想要一个纯色，以1200px宽为中心。

这是我的CSS：

"main_content"

如果有人可以帮我解决这个问题，那将非常有帮助。感谢您的时间！

Answer 1

您需要将background-size:cover添加到#main_wrapper。那应该做你想要的。

Answer 2

尝试使用图像尺寸：

#main_wrapper{
 background: url("img/bar_bkgnd.png");
 background-size: 100% 100%;  // or cover like Ben Dyer states
 background-repeat: no-repeat;
}

Answer 3

只需查看工作示例： http://jsfiddle.net/8hP4h/

#main_wrapper应大于#main_content并尝试not use fixed size。

您可以使用更有效的em，%，auto和其他人。

Answer 4

在#main_content中，添加以下内容：

 margin: auto;