Automatically Extending a Background Image
Question
I am trying to use an image for my background. The content of the page has a height of 800px. So on a tall screen you should be able to see a chunk of the background image after the content and on a shorter screen it may fit perfectly so that the content ends right at the bottom of the screen with little to no background image below.
I want the background image to automatically extend so no matter what size the screen is it will fill the entire screen. I have tried a couple of things, like setting the height for img.extfullbackground to auto, but then the scroll area goes WAY to far down (like 3000px) and 100% only goes to the size of the content.
Does anyone know how I can make the background image automatically extend to the size of the screen?
Here is a snippet of my HTML:
</head>
<body class="extfullbackground">
<img class="extfullbackground" src=".\background.png" alt="background" />
<div class="topbackground">
<div class="top">
<div class="topleft">
<img class="pf_logo" src=".\pf_logo.png" alt="PF Logo"/>
</div>
<div class="topmiddle">
<h1 class="title">PF is Temporarily Unavailable</h1>
</div>
<div class="topright" ></div>
</div>
</div>
<div class="bar"></div>
<div style="width:1220px; height:600px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto; background-color:blue;">
<div class="extcontentcontainer">
<h2 class="subtitle">Please be patient while we update PF.</h2>
<p class="pad10 line10">
Here's my CSS: (note: I used a CSS Reset script)
body {
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
overflow-x:hidden;
}
.extcontentcontainer {
width:820px;
height:600px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
background-color:red;
}
img.extfullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%; /* alternative: right:0; */
height:auto; /* alternative: bottom:0; */
padding-left:0px;
padding-right:0px;
margin-left:0px;
margin-right:0px;
}
2 answers
solution1
1 ACCPTED 2013-06-03 14:02:45
body {
background: url('background.png');
background-size: cover;
}
This worked for me on IE8. (it was an emulator on my iMac)
Else: why don't you set the image height to 100% and nothing for width. The image should keep it's ratio and extend to cover the entire height of the browser.
solution2
0 2013-06-03 13:39:05
You should try this (html):
<img src="bg.jpg" class="bg" alt="achtergrond">
css:
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index:-999;
pointer-events: none;
}
@media screen and (max-width: 1024px) {
img.bg {
left: 50%;
margin-left: -512px;
pointer-events: none;
}
}
this will stretch the background to fill-screen when the screen is wider than 1024, and to stay 1024 px when less.
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.