Menu
I've been working with a solution for keeping images at the bottom page. The code I've currently got is:
.footer {
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.
795
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
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...).
190
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;
}
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
