CODEWITHSUNDEEP
htmlcss
Joseph Duffy
Joseph Duffy

Reputation: 4826

Keeping background image at bottom


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.

Upvotes: 11

Views: 51923

Answers (5)

jeroen
jeroen

Reputation: 91734

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...).

Upvotes: 23

Kevin D.
Kevin D.

Reputation: 1

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>

Upvotes: 0

Hussein
Hussein

Reputation: 42808

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/

Upvotes: 3

ChrisJ
ChrisJ

Reputation: 5241

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;
}

Upvotes: 6

user657496
user657496

Reputation:

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).

Upvotes: 0

Related Questions