Keeping Background Image At Bottom

May 25, 2023 Post a Comment

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

Solution 1:

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

Solution 2:

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

Solution 3:

Do this

Baca Juga

<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/

Solution 4:

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>

Html5 Guru