包装器背景图像在顶部被切断答案

【问题标题】：Wrapper background image gets cut off at the top包装器背景图像在顶部被切断
【发布时间】：2012-03-25 17:25:07
【问题描述】：

我的网站有一个包含三个背景图像的包装器。一个静态的顶部和底部图像以及沿 y 轴重复的第三个图像。由于某种原因，顶部背景图像被切断，我无法弄清楚。

这里是直播网站的链接：http://storrepictures.weebly.com/projects.html

我已经偏移了顶部和底部的图像，这样你就可以看到它们的样子。可以看到最上面的那个被剪掉了。我试过弄乱一些 div 填充设置，但似乎无法让它工作。

一个有趣的提示：背景图像曾经是 JPEG（我切换到 PNG 文件，因为我需要透明度）。当我使用 JPEG 时，这不是问题 - 三张图像完美排列。

让我知道发布实际代码是否会有所帮助。从我在这个论坛上看到的内容来看，人们似乎喜欢看现场直播，我不想让帖子太长。

非常感谢您的帮助。

*这是 CSS：

body {

background: #ffffff;
font-family: Tahoma, arial, sans-serif;
font-size:12px;
color:#666666;
margin: 0;
padding: 0;
}


#wrapper {
    background: url(containerbg.png) center repeat-y;

}

#wrappertop{
background: url(containertop.png) no-repeat;
background-position: 0px -40px; 
}

#wrappertbtm{
background: url(containerbtm.png)   no-repeat;
background-position: 34px 480px;
padding-bottom: 65px;
}
.title{
width: 1022px;
min-height: 30px;
_height: 30px;
padding: 10px 0px 10px 0px;
font-size: 30px;
}

.title, .title a {
color: #fff;
}


#container {
width: 100%;
position: relative;
top: 125px;
bottom: 0px;
margin: 0px;
padding: -300px 0px 0px 0px;
}

#content{
width: 800px;
min-height: 500px;
_height: 500px;
margin: 0pt auto;

}

#content a{
color: #ff6633;
text-decoration: none;
}
.weebly_header{
background: url(%%HEADERIMG%%) no-repeat;
}

这是 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]> 
<style>
    #content
{
    height:400px !important;
} 
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
    <div id="wrapper">
      <div id="wrappertop">
        <div id="wrappertbtm">
            <div id="container">
                 <div id="header">
                   <div id="headerleft">{logo max-height="60"}</div>
                   <div id="navigation">{menu}</div>        
             </div> 


        <div id="content">{content}
            <div id="footer">{footer}

            </div>
            </div>
            </div>
            </div>
            </div>
</div> 
</div>

【问题讨论】：

仔细看图片内容，底部图片似乎适合顶部，反之亦然。
你指的是身体背景图片吗？我实际上不认为这些图像导致了问题。我最终删除了它们并用纯白色背景替换以简化现在的事情。我也删减了代码。

标签： css image background position

【解决方案1】：

据我所知，您的 body 元素有 padding 和 margin 值干扰：

body {
    background: url(theme/backgroundtop.jpg?909894) left top repeat-x, 
        url(theme/backgroundbottom.jpg?909894) left bottom repeat-x, 
        url(theme/backgroundmid.jpg?909894) left repeat;
    font-family: Tahoma, arial, sans-serif;
    font-size: 12px;
    color: #666666;
    height: 100%;
    margin: 100px 0 0 0;
    padding: 100px 0 0 0;
}

你应该摆脱这些规则：

body {
    /* ... */
    margin: 0;
    padding: 0;
}

一切都会好的。

注意：将 height: 100% 设置为 body 元素是没有意义的，您可能也想删除它。

注意#2：身体的多个背景只有 3 个值，它们将被解析为 T/LR/B，而顺序或这些值表明你应该更改他们的顺序，即backgroundtop / backgroundmid / backgroundbottom 而不是backgroundtop / backgroundbottom / backgroundmid

【讨论】：

感谢您的快速回复。我进行了您建议的更改，但现在网站的整个顶部都被切断了。我在原帖中包含了 CSS 和 html 代码。
请尝试进一步调查出现问题的区域，并过滤掉所有不必要的代码。这对我们和您来说都有助于澄清问题。