[HTML+CSS] background image 問題

首先將自己個browser window 縮短少少,當個網頁一load入去時要scroll down時,拉下來的background 會變左做白底, 請問有無方法解決呢?

source code 如下
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
  6. <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
  7. <title></title>
  8. <style type="text/css">
  9. #main-bg {
  10.         position:absolute;
  11.         width: 100%;
  12.         height: 100%;
  13.         background-image: url('http://www.dinpattern.com/tiles/elder.gif');
  14.         background-repeat:repeat-x repeat-y;
  15. }
  16. #wrapper {
  17.         position:relative;
  18.         background-color:#FFF;
  19.         color:#F00;
  20.         border: 1px solid #5D4B2B;
  21.         margin: 0px auto 0px auto;
  22.         width: 300px;
  23.         height: 1200px;
  24. }
  25. body {        margin: 0px 0px 0px 0px; }
  26. </style>

  27. </head>

  28. <body>
  29.         <div id="main-bg"></div>
  30.     <div id="wrapper"><p>This is a content</p></div>
  31. </body>
  32. </html>
複製代碼
附件: 您需要登錄才可以下載或查看附件。沒有帳號?註冊

#main-bg {
        position:absolute;
        width: 100%;
        height: 100%;
        background-image: url('http://www.dinpattern.com/tiles/elder.gif');
        background-repeat:repeat-x repeat-y;
}

change to

body {
        background-image: url('http://www.dinpattern.com/tiles/elder.gif');
}

TOP

如果想佢repeat, 其實唔需要加background-repeat
因為repeat-x同repeat-y只係以二選一, 唔可以兩個一齊打
如果真係要打background-repeat, 就打background-repeat: repeat;已經可以

TOP