如何定位以頁面中心爲中心的大圖像的背景？

我有尺寸爲2350 * 180尺寸的圖片。如何定位以頁面中心爲中心的大圖像的背景？

我正在致電差距。所以，我需要以通用格式提供代碼，以便適用於任何設備。

現在，我有一個大圖像的背景圖像。

style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%; "

這個代碼適用於只有少數..有在我的代碼的任何錯誤？

另一個問題，是當我滾動那裏是可見的滾動條。所以我加了

style="overflow:hidden;" 

<img src=""/> tag.

我是對的還是應該加任何其他的代碼？

編輯：

HTML

<body style="style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%;" class="body"> 
    <div id="image" class="noSelect"> 
     <table class="table"> 
      <tr> 
       <td class="main"> 
        <img src="http://www.rhpstudio.com/images/google_icon.png" alt="map" usemap="#map" style="overflow:hidden;" /> 
       </td> 
      </tr> 
     </table> 
</body>

我以這個背景背景：網址（「IMG/bg.png」）代碼，而這個形象給這裏是一個樣本，但它的尺寸是2350 * 180。

編輯：2 - >整個代碼

HTML代碼：

<body style="background-image:url(img/bg.png);" class="body"> 
    <div id="image" class="noSelect" style="height:100%;"> 
     <table class="table"> 
      <tr> 
     <td class="main"> 
      <img src="img/list.png" alt="bloodtestmap" usemap="#bloodtestmap" class="noSelect" style="overflow:hidden;" /> 
     </td> 
      </tr> 
     </table>

CSS代碼：

.body, .main_html 
    { 
     height: 100%; 
     margin: 0; 
    } 
    .body 
    { 
     overflow: hidden; 
     background-size: 100% 100%; 
    } 
    .table 
    { 
     width: 100%; 
     height: 100%; 
     text-align: center; 
    } 
    .main 
    { 
     max-width: 100%; 
     vertical-align: middle; 
    }

來源

2013-06-06 user

現在，您可以設置背景圖片以各種方式伸展到容器的邊緣。如果你不介意的圖像扭曲，你會做這樣的：

background-size: 100% 100%;

而不是這樣的（在被折斷）

style="style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%;"

嘗試這種在樣式表：

body { 
    background-image:url("img/bg.png"); 
    background-size: 100% 100%; 
}

來源

2013-06-06 08:35:54

請發現問題的編輯版本 – user

好的，請參閱我的修訂答案。 –

這個背景有一個設計，所以不斷重複。當我給這個'不重複的固定中心頂部;寬度：100％;高度：100％;'。背景是固定的，只有圖像滾動。 **我應該怎麼做以避免滾動條** – user

如何定位以頁面中心爲中心的大圖像的背景？

回答

相關問題