包装背景图像在顶部被切断。
我的网站有一个带有三个背景图片的包装器。沿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>Stack Overflow用户
发布于 2012-03-25 17:46:05
据我所见，您的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：您只有三个值用于主体的多个背景，这些值将被解析为T/LR/B，而顺序或这些值指示您应该更改它们的顺序，即backgroundtop / backgroundmid / backgroundbottom而不是backgroundtop / backgroundbottom / backgroundmid。
https://stackoverflow.com/questions/9862306
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号