滾動後HTML背景重複被切斷

我試圖做一個菜單，但它的工作正常，當我縮小窗口並滾動時，背景不會延伸。例如：滾動後HTML背景重複被切斷

Full screen view enter image description here

第一圖像是在全屏幕和第二圖像是我已經在頁面滾動之後。正如你所看到的，背景不會延伸。下面是我的CSS：

body{ 
padding: 0px; 
margin: 0px; 
font-family:Arial, Helvetica, sans-serif; 
background-color: #717070; 
} 
.header{ 
background-image: url("img/bgsmall.png"); 
height: 100px; 
background-repeat: repeat-x; 
min-width: 1000px; 

} 
.logo{ 
margin-left:320px; 
float:left; 
} 
#menu{ 
position: relative; 
height: 100px; 
text-align: center; 
width:auto; 
margin-left:600px; 
min-width:1000px; 
} 
#menu ul{ 
list-style: none; 
padding: 0; 
margin: 0; 
position:relative; 
} 
#menu li{ 
float: left; 
display: inline; 
padding-top:35px; 
position:relative; 
text-transform:uppercase; 
} 

#menu li a{ 
text-decoration: none; 
padding-left: 32px; 
padding-right: 32px; 
font-size: 15px; 
font-family: arial; 
color: #ffffff; 
text-align:center; 
} 
#menu li a:visited{ 
color: #ffffff; 
} 
#menu li a:hover{ 
color: #D86C00; 
}

HTML代碼

<html> 
    <head> 

    <link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
    </head> 
<body> 
    <div class="header"> 

<div id="menu"> 
    <ul> 
     <li><a href="#">page1</a></li> 
     <li><a href="#">page2</a></li> 
     <li><a href="#">page3</a></li> 
     <li><a href="#">page4</a></li> 
    </ul> 
    </div></div> 





</body> 
</html>

在此先感謝。

來源

2012-08-24 user1598142

將position:absolute;加到.header類中。

來源

2012-08-24 13:26:19 ygssoni

這是你的最小寬度：1000px;在導致此問題的#menu上。不知道什麼佈局是要實現很難說，你應該做些什麼來代替這一點，但考慮了這一點挑選出特定的問題

來源

2012-08-24 13:28:11 MiiisterJim

您可以通過兩種方式解決這個問題：

1 -

body{ 
padding: 0px; 
margin: 0px; 
font-family:Arial, Helvetica, sans-serif; 
background-image: url("img/bgsmall.png"); 
background-repeat: repeat-x; 
background-color: #717070; 
} 
.header{ 
height: 100px; 
}

刪除「最小寬度：1000像素;」來自標題風格

來源

2012-08-24 13:32:18

滾動後HTML背景重複被切斷

回答

相關問題