背景圖片拉伸

我的背景有一個40x1000的jpg文件。我的CSS如下：背景圖片拉伸

body 
{ 
    margin: 0px; 
    padding:0 px; 
    text-align: center; 
    background-image: url(jute_for_web1.jpg) ; 
    background-repeat: repeat-x; 
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; 
    border-top:0px; 
    height:100%; 
    width:100%; 
} 
div.container 
{ 
    text-align: left; 
    border-color: Black; 
    border-width: 0px; 
    border-style: solid; 
    width: 1000px; 
    height: 768px; 
    margin: 5px auto; 
    background-color:White; 
}

這延伸了我的形象。我究竟做錯了什麼？

來源

2010-06-09 yaip

背景圖片不能通過CSS縮放，所以問題可能與您的想法有所不同。因此，在這種情況下，如果您可以提供帶問題的示例頁面的鏈接，那麼我敢打賭，有人會更可能爲您找到解決方案 – mVChr 2010-06-09 22:42:57

您正在使用哪種瀏覽器？在Firefox 3.6.3中，您的代碼似乎按預期工作（圖像在瀏覽器的整個寬度上重複）。 – 2010-06-09 22:47:22

它不舒展你的形象..

您只需將.container背景圖像的頂部，因爲你在容器上有background-color:white，在身體形象沒有得到顯示..

告訴我們你想要做什麼，我們可以幫助更多..

來源

2010-06-09 22:38:32

但重複的背景圖像將在容器外部可見。 – 2010-06-09 23:02:13

@Gert，容器比較大，最有可能隱藏大部分backgorund ..我想這就是爲什麼他認爲圖像被拉伸..因爲他只看到它的一小部分.. – 2010-06-10 00:07:09

可能是。我使用1280x1024，所以對我來說，圖像顯示。 – 2010-06-10 00:17:31

你的一些HTML可能會有所幫助。在這個例子中，圖像正確顯示。（我用相同的名字製作了一張圖片。）

<html> 
    <head> 
     <style type="text/css"> 
      body 
      { 
       margin: 0px; 
       padding:0 px; 
       text-align: center; 
       background-image: url(jute_for_web1.jpg) ; 
       background-repeat: repeat-x; 
       font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; 
       border-top:0px; 
       height:100%; 
       width:100%; 
      } 
      div.container 
      { 
       text-align: left; 
       border-color: Black; 
       border-width: 0px; 
       border-style: solid; 
       width: 1000px; 
       height: 768px; 
       margin: 5px auto; 
       background-color:White; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      Hello World! 
     </div> 
    </body> 
</html>

來源

2010-06-09 22:40:31 JYelton

有沒有辦法在這裏上傳圖片，以便我可以告訴你我看到了什麼？ – yaip 2010-06-11 17:33:57

看看http://yfrog.com/jojutej – JYelton 2010-06-11 18:11:01

這是圖像： http://yfrog.com/jk1d6j ，它呈現爲： http://yfrog.com/j5fbqp – yaip 2010-06-11 19:32:50

背景圖片拉伸

回答

相關問題