HTML 正文背景圖像未覆蓋所有頁面
[英]HTML body background image not cover all page
問題描述
我正在嘗試將背景圖像設置為整個 html 頁面，但我每次都失敗了。它沒有拉伸。這是我的 css 和 html 代碼：
css代碼：
body {
background-image:url(body_background.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width:1200px;
margin:0 auto;
}
#main_container_div {
padding: 0px;
width: 1000px;
margin-top: 30px;
margin-left: 150px;
}
#div2 {
float: left;
width: 250px;
height: 600px;
margin-top: 0px;
margin-right: 0px;
background-repeat: no-repeat;
}
#div3 {
position: relative;
float: left;
width: 750px;
height: 500px;
margin-top: 50px;
overflow: hidden;
}
html正文：
<body>
<div id="main_container_div">
<div id="div3">
</div>
<div id="div2">
</div>
</div>
</body>
您可以嘗試使用 1366x768 大小的圖像。 此外，我正在 1366x768 分辨率下嘗試此操作。請注意，此問題在此分辨率或更高分辨率上可見。感謝您的幫助。
8 個解決方案
解決方案1
2 2013-02-05 10:54:20
試試 background-size: cover 在你的 css 中
background-size:cover;
解決方案2
2 2013-05-16 11:56:04
不要在體內使用它。 像這樣在 html 元素上嘗試：
html
{
background-image: url('your url');
background-repeat: no-repeat;
min-height:100%;
}
<html>
<!--bg is applied here instead -->
<body>
...
</body>
</html>
解決方案3
0 2013-02-05 10:50:54
如果要全頁顯示背景，則需要將背景設置為重復。
background-repeat: no-repeat;
到
background-repeat: repeat-x;
要么
background-repeat: repeat-y;
解決方案4
0 2013-02-05 11:16:36
background: url(body_background.png) 100% 100% no-repeat;
background-size: cover;
解決方案5
0 2013-05-16 12:08:15
background-size:cover;
確實有效，但它不支持所有瀏覽器類型。 這是我過去使用的代碼，
section#background {
background: url('../img/background/feature.jpg') no-repeat center center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/background/feature.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/background/feature.jpg',sizingMethod='scale')";
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover; }
這是 jsfiddler 鏈接
解決方案6
0 2019-06-13 23:00:07
這通常對我有用，因為我通常用 html 而不是 body 來做。 這有效，因為它需要 Web 瀏覽器的整個頁面。 附： 我知道這是舊的，認為它會有所幫助。
html {
background: url(images/bg.jpg or whatever link or img here) no-repeat center fixed;
background-size:cover;
}
解決方案7
0 2021-01-03 11:47:30
我剛剛遇到了同樣的問題，您可以通過拉伸圖像來解決它：
html{
min-height: 100%;
}
或者保持相同的比例，你可以這樣做：
body{
background-size: cover;
background-attachement: fixed;
}
解決方案8
0 2021-04-01 16:20:42
就我而言，我通過設置解決了它
height: auto
這樣，如果內容比豎屏大，它會一直增長，直到把它全部包裹起來。 但你也必須設置
min-height: 100vh
因此，如果內容小於它，背景將增長到占據所有可見的垂直屏幕。
高度為100％的主體（帶有背景圖片）：覆蓋整個頁面，而不僅僅是視口-盡可能不使用JS
[英]Body with height 100% with background-image: cover to fill enire page not just a viewport - without js if possible
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.