HTML body background image not cover all page
Question
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:
Css code:
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:
<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. Also I am trying this on 1366x768 resolution.Note that the problem is visible on this or higher resolutions.Thanks for any help..
8 answers
solution1
2 2013-02-05 10:54:20
试试 background-size: cover 在你的 css 中
background-size:cover;
solution2
2 2013-05-16 11:56:04
Don't use it in the body. Try it on the html element like so:
html
{
background-image: url('your url');
background-repeat: no-repeat;
min-height:100%;
}
<html>
<!--bg is applied here instead -->
<body>
...
</body>
</html>
solution3
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;
solution4
0 2013-02-05 11:16:36
background: url(body_background.png) 100% 100% no-repeat;
background-size: cover;
solution5
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
solution6
0 2019-06-13 23:00:07
this usually works for me, as i usually do it in html instead of body. this works as it takes the full page of the web browser. 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;
}
solution7
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;
}
solution8
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.