Html 如何设置以我的网站为中心的背景图像？_Html_Css

Html 如何设置以我的网站为中心的背景图像？

html css

Html 如何设置以我的网站为中心的背景图像？,html,css,Html,Css,我有一个基于以下CSS和HTML代码的查询，请参见下文我有一个从左到右横跨整个浏览器页面的背景图像，这不是我想要的如何使背景图像保持在我的主要内容画布的边界内，即以850x600px为中心，外部的任何东西都是白色 body { background-color: #ffffff; margin:0px; padding:0px; background-image: url(images/background.jpg); background-repeat: repeat-x; bac

我有一个基于以下CSS和HTML代码的查询，请参见下文

我有一个从左到右横跨整个浏览器页面的背景图像，这不是我想要的

如何使背景图像保持在我的主要内容画布的边界内，即以850x600px为中心，外部的任何东西都是白色

    body {
background-color: #ffffff;
margin:0px;
padding:0px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
}

#main {

width:850px;
margin: 0px auto 0px auto;
border: 0px solid #f0f0f0;

}

<body>

<div id="main">
<img src="images/female_model.jpg" id="female_model" alt="" />
<div id="colwrap1">
<img src="images/nav_bar.jpg" id="nav_bar" alt="" />
<img src="images/site_name.jpg" id="site_name" alt="" />
</div>
</div>

</body>

将背景图像放在main上如何？

如果要将背景附加到main DIV，请在那里指定背景。听起来你想让背景水平居中背景位置：50%；但对主DIV背景的垂直范围重复：repeat-y

如果背景图像未显示，可能是因为图像不可访问或主DIV没有高度，如果female_model和colwrap1都浮动，则可能发生这种情况。

如果要将背景附加到主DIV，请在那里指定背景。听起来你想让背景水平居中背景位置：50%；但对主DIV背景的垂直范围重复：repeat-y

如果您的背景图像没有出现，可能是因为图像不可访问，或者主DIV没有高度，如果female_model和colwrap1都浮动，则可能会出现这种情况。

Dominic是正确的。将背景属性从body移到main div，您应该拥有所需的内容

如果我正确理解了您的问题，您希望将页面背景设置为白色，并将主div的背景设置为您设置为的任何图像-正确吗

如果是，将主体设置为：

body
{
  background:#fff;
}

我们应该做到这一点

现在，我还注意到您要使用的图像的宽度比您的div小。因此，您希望main具有以下属性：

#main
{
   background-image:url(myimage.jpg);
   background-position:top;
   background-repeat:repeat-x; <!-- you need this as your image is < than the div width -->
 }

这应该能奏效。如果仍然不起作用，也许您想在服务器上共享页面链接。我们可能误解了你的问题。

多米尼克是正确的。将背景属性从body移到main div，您应该拥有所需的内容

如果我正确理解了您的问题，您希望将页面背景设置为白色，并将主div的背景设置为您设置为的任何图像-正确吗

如果是，将主体设置为：

body
{
  background:#fff;
}

我们应该做到这一点

现在，我还注意到您要使用的图像的宽度比您的div小。因此，您希望main具有以下属性：

#main
{
   background-image:url(myimage.jpg);
   background-position:top;
   background-repeat:repeat-x; <!-- you need this as your image is < than the div width -->
 }

这应该能奏效。如果仍然不起作用，也许您想在服务器上共享页面链接。我们可能误解了您的问题。

谢谢您的提问，但不幸的是，我的背景图像不再出现。仅供参考，我的背景图像文件是一个尺寸为22x600的垂直条带。任何进一步的帮助都将不胜感激。我正在Mac OS X上使用Chrome或FF。谢谢。然后忽略Domonic的背景重复线仍然不起作用-我真的认为这将是一个简单的，但这让我感到困惑！我在答案中添加了更多细节；我想我更了解你想要达到的结果。背景图像可能不显示，因为main没有高度；作为一个实验，试着为那个DIV指定一个高度。你能发布一个图像来描绘你想要达到的效果吗？谢谢你，但不幸的是，我的背景图像不再出现了。仅供参考，我的背景图像文件是一个尺寸为22x600的垂直条带。任何进一步的帮助都将不胜感激。我正在Mac OS X上使用Chrome或FF。谢谢。然后忽略Domonic的背景重复线仍然不起作用-我真的认为这将是一个简单的，但这让我感到困惑！我在答案中添加了更多细节；我想我更了解你想要达到的结果。背景图像可能不显示，因为main没有高度；作为一个实验，试着为那个DIV指定一个高度。你能发布一张画出你想要达到的效果的图片吗？