縮放不同分辨率的背景高度

我希望我的背景圖像能夠自行縮放以適應不同分辨率的屏幕。我不是在尋找像背景大小：覆蓋，我總是想看到我的背景圖像的完整視圖。縮放不同分辨率的背景高度

例如，如果我的背景只是500x1000像樹的圖像，我總是希望在整個背景中看到整棵樹，而不是縮放爲整頁，只顯示樹的一部分。

我嘗試了不同的東西background-size：但似乎沒有任何工作。這是我在我的CSS

body 
{ 
    margin: 0; 
    padding: 0; 
    background: #fffff; 
    font-family: "Lucida Grande", Verdana, sans-serif; 
    font-size: 100%; 
    background-image:url(main_bg.jpg); 
    background-repeat:no-repeat; 
    background-size:contain Auto; 
}

任何幫助將不勝感激。

編輯：剛發現我的問題的解決方案。我不得不所有的背景屬性轉移到CSS的不是身體的HTML部分：P

來源

2014-01-22 TKP

它應該是背景大小：100％自動;包含和封面適用於兩個軸 –

你不能只是做：

background-size: 100%

來源

2014-01-22 19:08:20 kiaaanabal

這確實填充整個頁面的圖像，但是當我最大化我的瀏覽器時，它只顯示圖像的頂部。無論瀏覽器的大小如何，我都希望看到整個圖像。 – TKP

你應該嘗試把100％的高度爲HTML和身體，然後嘗試尺寸的圖像

html,body {height:100%;}

body 
{ 
    margin: 0; 
    padding: 0; 
    background: #fffff; 
    font-family: "Lucida Grande", Verdana, sans-serif; 
    font-size: 100%; 
    background-image:url(main_bg.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
}

或

body 
{ 
    margin: 0; 
    padding: 0; 
    background: #fffff; 
    font-family: "Lucida Grande", Verdana, sans-serif; 
    font-size: 100%; 
    background-image:url(main_bg.jpg); 
    background-repeat:no-repeat; 
    background-size:100% auto; 
}

來源

2014-01-22 19:11:03 Night

剛剛嘗試過這種方法，但它仍然放大了圖像，所以我只能看到它的頂部。 – TKP

嘗試'background-position：bottom;' – Night

我這樣做：

HTML：

<body> 
    <img src='main_bg.jpg'> 
</body>

CSS：

body { 
height: 100%; 
margin: 0; 
padding: 0; 
overflow-y: hidden; 
} 

img { 
height: 100%; 
padding: 0; 
margin: 0; 
}

如果它不適合你， '只有' JavaScript可以幫助你。

來源

2014-01-22 20:06:27 bugovicsb

縮放不同分辨率的背景高度

回答

相關問題