Keeping background image at bottom
.f开发者_StackOverflowooter {
background-image: url('images/footer.png');
background-repeat: repeat-x;
position: absolute;
height: 950px;
width: 100%;
z-index: -101;
bottom: 0;
}
However, this has issues. What I'm aiming for is a background that sticks to the bottom and is displayed behind everything else (Hence the low z-index). I've got the following code for the top part (There's a middle, that's just block colour, and just added to the body):
.background {
position: absolute;
top: 0;
width: 100%;
height: 600px;
background-image: url('images/sky.png');
background-position: center;
background-repeat: repeat-x;
z-index: -100;
}
Please note: The first part doesn't work (It's not at the bottom), but the second part does (It's at the top).
If you wish to visit the site, feel free to: www.duffydesigns.co.uk/brough (Please don't pass judgment, it's a work in progress, nothing is truly finished!). Thanks for the help, Joseph Duffy Note: As I'm sure you can figure out, the top part is the sky, the bottom is grass and trees.background-position takes two arguments, an x-value and an y-value so to position it at the bottom, you would use: background-position: center bottom;. You could use this to fix your first example.
Is there any reason that you cannot put the background as the background of the body or the html tag? I don´t think it is officially allowed behind the html tag, but I have never seen a browser where it doesn´t work (not yet anyway...).
If you want a background image to appear at the bottom of the page, you may use:
body {
background-image: url(...);
background-position: center bottom;
background-repeat: no-repeat;
}
Do this
<div class="background"></div>
.background {
width:100%;
height:90px;
background:transparent url(...) repeat-x 0 0;
position:fixed;
bottom:0;
}
Check working example at http://jsfiddle.net/YGXxT/
If you want it to appear at the very bottom at all times (of the page, not the window), use something like this, paste it into an html file to see it at work, change the height of .test to show that it'll stay at the screen bottom when the window doesnt scroll, but go further down when it does.
<html>
<head>
<style type="text/css">
html, body{
height:100%;
margin:0;
}
#content{
min-height:100%;
position:relative;
}
#footer{
background:green;
width:100%;
height:150px;
margin-top:-150px;
display:block;
}
.test{
background:blue;
width:400px;
height:2000px;
opacity:.7;
color:#fff;
padding:20px;
}
</style>
</head>
<body>
<div id="content">
<h1>This is a page.</h1>
<div class="test">this shows that things appear in front of the bg</div>
</div>
<div id="footer"></div>
</body>
</html>
Add min-height: 100% instead of the height: 950px, that will give your div the height necessary. Second, use position:fixed to lock the background image at the same place (for scrolling).
加载中,请稍侯......
精彩评论