自動擴展背景圖片

我想爲我的背景使用圖片。該頁面的內容高度爲800px。因此，在高屏幕上，您應該能夠在內容之後看到一大塊背景圖像，並且在較短的屏幕上它可能完全適合，以便內容在屏幕底部結束，幾乎沒有下面的背景圖像。自動擴展背景圖片

我想讓背景圖像自動延伸，所以無論屏幕大小如何，它都會填滿整個屏幕。我嘗試了一些東西，比如將img.extfullbackground的高度設置爲自動，但隨後滾動區域變得更遠（例如3000px），並且100％僅達到內容的大小。

有誰知道我可以如何讓背景圖像自動擴展到屏幕的大小？

這裏是我的HTML的一個片段：

</head> 

<body class="extfullbackground"> 
    <img class="extfullbackground" src=".\background.png" alt="background" /> 
    <div class="topbackground"> 
      <div class="top"> 
       <div class="topleft"> 
        <img class="pf_logo" src=".\pf_logo.png" alt="PF Logo"/> 
       </div> 
       <div class="topmiddle"> 
        <h1 class="title">PF is Temporarily Unavailable</h1> 
       </div> 
       <div class="topright" ></div> 
      </div> 
     </div> 
     <div class="bar"></div> 
     <div style="width:1220px; height:600px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto; background-color:blue;"> 
     <div class="extcontentcontainer"> 
     <h2 class="subtitle">Please be patient while we update PF.</h2> 
      <p class="pad10 line10">

這裏是我的CSS（注：我使用的CSS復位腳本）

body { 
    position:relative; 
    padding:0 0 0 0; 
    margin:0 0 0 0; 
    overflow-x:hidden; 
} 

.extcontentcontainer { 
    width:820px; 
    height:600px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:0px; 
    padding-top:0px; 
    background-color:red; 
} 

    img.extfullbackground { 
     position:absolute; 
     z-index:-1; 
     top:0; 
     left:0; 
     width:100%; /* alternative: right:0; */ 
     height:auto; /* alternative: bottom:0; */ 
     padding-left:0px; 
     padding-right:0px; 
     margin-left:0px; 
     margin-right:0px; 
    }

來源

2013-06-03 Joe Engle

body { 
    background: url('background.png'); 
    background-size: cover; 
}

這對我工作在IE8上。（這是我的iMac上的模擬器）

其他：你爲什麼不把圖像高度設置爲100％而沒有設置寬度。圖像應該保持它的比例並擴展到覆蓋瀏覽器的整個高度。

來源

2013-06-03 14:02:45

在IE中完美運行。在Firefox中它可以工作，但它只使用圖像的頂部。有沒有一種方式，以便在Firefox中使用整個圖像.. –

嘗試moz前綴：'-moz-background-size：cover;' –

你應該試試這個（HTML）：

<img src="bg.jpg" class="bg" alt="achtergrond">

css：

img.bg { 
    min-height: 100%; 
    min-width: 1024px; 
    width: 100%; 
    height: auto; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index:-999; 
    pointer-events: none; 
} 
@media screen and (max-width: 1024px) { 
    img.bg { 
     left: 50%; 
     margin-left: -512px; 
     pointer-events: none; 
    } 
}

當屏幕寬度超過1024時，這將擴展背景以填充屏幕，並在屏幕寬度小於1024時保持1024像素。

來源

2013-06-03 13:39:05 Ivotje50

雖然我很在意高度，而不是寬度 –

使用此時，背景將不會滾動。內容將然而。 – Ivotje50

Dammm工作！這個網站的知識永遠不會令我驚歎。非常感謝大家！ –

自動擴展背景圖片

回答

相關問題