居中CSS背景圖片

我正在處理的網站Tamsnails.com即將完成，但它有一個問題，我一直在困擾一段時間。商店的背景圖像將無法延伸到我高分辨率工作筆記本電腦的全屏幕。我已經嘗試了很多東西，在過去幾個月，其中很多我忘了，但居中CSS背景圖片

我記得在第一次，我有它作爲一個實際的CSS background-img

然後，我不得不

<head> 
<body id="theBody"> 
<div id="backgroundImageWrapper" style="height: 100%; width: 100%; z-index: 0; position: absolute;"> 
<img id="mainBackgrond" src="background_image.JPG"> 
</div>

與mainbackground風格

#mainBackgrond { 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
}

現在，我有

<body id="theBody"> 
<img id="mainBackgrond" src="background_image.JPG"> 
<div id="wrapper">

風格

#mainBackgrond { 
    height: 50em; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
}

，因爲這至少看起來在我的家用筆記本好。

是的，我知道我拼寫'mainBackgrond'錯了..忍着我在這裏！

來源

2011-07-09 marklar

這是什麼問題？ – joseph

我不認爲你可以，除非你想使用HTML 5.

請參閱：css scaled background image如果這是可以接受的。編輯：FYI，使用「高度：100％」延伸到100％的高度，而不是窗口。高度，而不是窗口。

來源

2011-07-09 01:57:05 SirNickity

如果問題是圖像不拉伸到窗口的底部（這是我所看到的Chrome），那麼你的#mainBackgrond風格改變height: 50em到：

height: 100%;

來源

2011-07-09 01:56:27 Town

你有沒有試圖在督察中改變這種情況？我相信我已經嘗試過了，它實際上會將圖像擠壓到頂端。 – marklar

@marklar：是的，我看起來很好。圖像寬高比例遍佈整個地方，但如果您想要將圖像拉伸以適合任何尺寸的窗口，就會得到這樣的效果！:) – Town

那麼，在螢火蟲，它適合的圖像與瀏覽器的大小，但瀏覽器仍然允許垂直滾動，並在下面有灰色背景。我想我會希望它能夠填補其餘部分，因爲如果某人有像我這樣的小屏幕，他們需要向下滾動。 – marklar

你可能想看看這個（或其他類似的jQuery插件）

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/#demo - 使用非常簡單，它完全伸展背景圖片，而不用擔心寬高比。

來源

2011-07-09 02:42:47 Joonas

嘗試去除高度屬性，這樣它將保持高寬比並在屏幕上一直延伸，如果這是意圖的話。

#mainBackgrond { 
    position: fixed; 
    z-index: -1; 
    width: 100%; 
    left: 0px; 
    top: 0px; 
    background: url(/background_image.JPG) no-repeat center center fixed; 
}

背景圖像本身是巨大的，使得初始加載時間很慢，你應該考慮更多的是壓縮或調整。

也看看css media query一個很好的方式來顯示不同大小的背景圖像的遊客與較小的屏幕，甚至可能沒有看到背景的決議。

@media screen and (max-device-width: 480px) { 
    .column { 
    float: none; 
    } 
}

來源

2011-07-09 02:43:38

居中CSS背景圖片

回答

相關問題