HTML 正文背景图像未覆盖所有页面
[英]HTML body background image not cover all page
问题描述
I am trying to set background image to whole html page but I am failing everytime.It is not stretching.Here is my css and html codes:
我正在尝试将背景图像设置为整个 html 页面，但我每次都失败了。它没有拉伸。这是我的 css 和 html 代码：
Css code: 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: html正文：
<body>
<div id="main_container_div">
<div id="div3">
</div>
<div id="div2">
</div>
</div>
</body>
You can try with an image that has 1366x768 size.您可以尝试使用 1366x768 大小的图像。 Also I am trying this on 1366x768 resolution.Note that the problem is visible on this or higher resolutions.Thanks for any help..此外，我正在 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
Don't use it in the body.不要在体内使用它。 Try it on the html element like so:像这样在 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
If you want to display background in full page , you need to set background as repeat.如果要全页显示背景，则需要将背景设置为重复。
background-repeat: no-repeat;
To到
background-repeat: repeat-x;
OR要么
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;
does work but it doesn't support all the browser type.确实有效，但它不支持所有浏览器类型。 Here's the code i used in the past,这是我过去使用的代码，
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; }
and here's the jsfiddler link这是 jsfiddler 链接
http://jsfiddle.net/Raver0124/3AwHa/1/ http://jsfiddle.net/Raver0124/3AwHa/1/
解决方案6
0 2019-06-13 23:00:07
this usually works for me, as i usually do it in html instead of body.这通常对我有用，因为我通常用 html 而不是 body 来做。 this works as it takes the full page of the web browser.这有效，因为它需要 Web 浏览器的整个页面。 ps.附： i know this is old, thought it would help.我知道这是旧的，认为它会有所帮助。
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
I just had the same problem and you can solve it either by stretching the image:我刚刚遇到了同样的问题，您可以通过拉伸图像来解决它：
html{
min-height: 100%;
}
or to keep the same proportions you can do:或者保持相同的比例，你可以这样做：
body{
background-size: cover;
background-attachement: fixed;
}
解决方案8
0 2021-04-01 16:20:42
In my case I solved it by setting就我而言，我通过设置解决了它
height: auto
This way, if the content is bigger than the vertical screen, it will grow until it wraps it all.这样，如果内容比竖屏大，它会一直增长，直到把它全部包裹起来。 But you also must set但你也必须设置
min-height: 100vh
So, the background will grow to occupy all the visible vertical screen if the content is smaller than it.因此，如果内容小于它，背景将增长到占据所有可见的垂直屏幕。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.