包裝背景圖像在頂部被切斷

我的網站有一個包含三個背景圖像的包裝。沿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>

來源

2012-03-25 dq7133

仔細看看圖像內容，看起來底部圖像適合頂部，反之亦然。 – 2012-03-25 19:05:05

你指的是身體背景圖片嗎？我其實並不認爲這些圖像是造成這個問題的原因。我最終刪除了它們，並用簡單的白色背景替換以簡化現在的事情。我也減少了代碼。 – dq7133 2012-03-25 19:36:20

從我所看到的，你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

來源

2012-03-25 17:46:05

感謝您的快速回復。我做了你所建議的更改，但現在整個站點的頂部都被切斷了。我在原帖中包含了CSS和html代碼。 – dq7133 2012-03-25 18:48:33

請嘗試並進一步調查發生問題的區域，並過濾掉所有不必要的代碼。這對我們和你來說都將有很大的幫助來澄清這個問題。 – 2012-03-25 19:01:33

包裝背景圖像在頂部被切斷

回答

相關問題