CSS拉伸背景圖片

我有一個大的圖像被用作頁面的background-image。我想要的是圖像的高度將被拉伸以填充頁面的高度。它也應該居中。CSS拉伸背景圖片

background: black url("/image/background.jpg") no-repeat fixed center;

來源

2013-01-09 JR Galia

background-size: cover會做的伎倆在現代瀏覽器 - 詳細信息請參閱Mozilla的documentation。

對於舊的瀏覽器（尤其是舊版本的IE），我已經有很多成功的使用jQuery插件，像this one模仿行爲。

來源

2013-01-09 00:16:30 Kelvin

這固定它：'background-size：1024px 100％;' –

很高興能夠t o指向你所需要的方向:) – Kelvin

我似乎無法使用'background'標籤，但'background-size：cover'似乎正常工作。 – sircapsalot

它添加到CSS

{ 
background: black url("/image/background.jpg") no-repeat fixed center; 
height: 100%; 
width:100% 
}

來源

2013-01-09 00:16:19

開爾文的答案是完美的，如果圖像實際上是較大的，那麼你想要把它的空間並將裁剪它，設置寬度和高度將拉伸圖像 –

我認爲使用div會是獲得所需效果的最簡單方法。

<div id="background"> 
    <img src="/image/background.jpg" class="stretch" alt="" /> 
</div> 
    <style> 
    #background { 
     background-color:#000000; 
     width: 100%; 
     height: 100%; 
     position: fixed; 
     left: 0px; 
     top: 0px; 
     z-index: -1; 
    } 

    .stretch { 
     width:100%; 
     height:100%; 
    } 
    </style>

來源

2013-01-09 00:17:58

這裏是一個很好的書面記錄

http://css-tricks.com/perfect-full-page-background-image/

它是

的要點

body { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

來源

2013-01-09 00:22:40 foundry

CSS拉伸背景圖片

回答

相關問題