填充全屏不只是身體的背景圖像

我的背景圖像應該只填充body元素，但它佔用了整個視口。我編輯了我的原始帖子以擺脫無關的代碼。我希望我在這裏發佈的內容足夠，但不是太多。基本上，發生的事情是HTML的背景顏色填滿了屏幕，並且沒有顯示身體中的背景圖像。任何幫助，將不勝感激。填充全屏不只是身體的背景圖像

html {background: #95A3C2;} 
body { 
background-image: url(_images/pg_p_lewis_bckgrnd.jpg); 
width: 960px; 
margin: 0 auto 0; 
font-size: 1.1em; 
line-height: 1.3em; 
font-family: "minion-pro"; 
} 

<body> 
<div id="main"> 
<div class="text"> 
<p>text</p> 
</div> 
<div class="image"> 
<p>Image Gallery</p> 
<p><span class="caption">Center image vertically on page and hover to enlarge.</span></p> 
<p><img class="img-zoom" src="_images/RL_LEWIS_Alex_KCC_1197_Sur_1.jpg" class="img-thumbnail" alt="lewis land grant" width="259" height="387"></p> 
</div> 
</div> 
<script src="jquery.js"></script> 
<script> 
$(document).ready(function(){ 
$('.img-zoom').hover(function() { 
$(this).addClass('transition'); 

    }, function() { 
     $(this).removeClass('transition'); 
    }); 
    }); 

</script> 
</body> 
</html>

來源

2016-12-02 Barton Lewis

你有太多的代碼，難以置信地告訴你正在嘗試做什麼。理想情況下，你的問題應該比代碼更多的非代碼。請參見[如何創建最小，完整和可驗證的示例]（http://stackoverflow.com/help/mcve） – Gerrit0

background-size？爲什麼你沒有在你的身體中輸入背景大小？ – Obink

我嘗試添加一個背景大小，但我有同樣的問題 - HTML顏色顯示整個屏幕和背景圖像不顯示在正文中。 –

你的背景圖像填充整個視，因爲<body>元素很奇怪這樣。如果在<html>元素上沒有設置背景，背景將填充整個視口。

沒有設置<html>屬性的背景屬性：

body { 
 
    background: #f00; 
 
}

<p>Text</p>

設置<html>元素的背景屬性。

body { 
 
    background: #f00; 
 
} 
 
html { 
 
    background: #fff; 
 
}

<p>Text</p>

來源

2016-12-02 05:07:45 Gerrit0

謝謝。但是，如果您像在這裏一樣添加一種顏色到顏色爲整個屏幕顯示的html（包括在主體中），並且背景圖像根本不在主體中顯示。 –

@BartonLewis如果你能提供一個*簡單*的例子，表明我可以提供幫助，我似乎無法重現你的問題。 – Gerrit0

我減少了我的實際頁面上的內容，但很難知道要省略多少，因爲我不知道它是否是我的html結構或其他原因使背景顏色覆蓋背景圖像。圖像與html不同，但是由於css位於文檔中，而不是外部樣式表，我不認爲這是問題。對不起，如果這不是你所需要的，並感謝你的幫助。 –

我增加了一節標籤附上我的div的和現在的背景圖像顯示以及用於在HTML背景顏色，它應該是。不知道爲什麼這有效，但它確實。

來源

2016-12-04 21:30:46

填充全屏不只是身體的背景圖像

回答

相關問題