在页面所有不包含控件的部分设置网页背景图片

Question

我正在向网站上的现有页面添加背景图像。我被要求这样做的方式是，除了包含页面上所有现有控件等的矩形之外，图像会显示在页面上的任何地方。在这个矩形中，背景颜色将保持与今天一样的白色。这是一个页面链接，显示了修改完成后页面的外观： http://www.maestroweb.com/default_bgtest3.aspx

我已经尝试了多种方法来做到这一点。例如，我尝试添加

<div style="background-color: white">

或

<asp:Panel ID="Panel1" runat="server" BackColor="White">

围绕现有控件。这些方法正确地“确定”了矩形的高度，但宽度设置为窗口的宽度，这不是我想要的。我可以添加宽度属性，但页面上的控件具有不同的宽度，有时会发生变化。

到目前为止，我想出的最佳解决方案是这样的：

<table bgcolor="White" align="center"><tr><td>
    <%-- All of the page's controls, etc. --%>
</td></tr></table>

这行得通。矩形的大小正确，其背景保持白色。新的背景图片只显示在它应该出现的地方。

我的问题是上面的解决方案对我来说似乎很笨拙。有没有更好的方法来实现相同的目标？

谢谢。

Answer 1

你必须使用css属性background-size:cover

body {
  background: url('http://www.maestroweb.com/6/winter.jpg');
  background-size: cover;
}
.content-wrapper {
  height: 400px;
  width: 600px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
}

<div class="content-wrapper"></div>