Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
3.00/5 (3 votes)
See more:
hello
i want to make an image as the header as well as footer of my website.For header i used the following code
CSS
body
{
    background-image:url(footer.png);
    background-repeat:no-repeat;
    background-size:contain;
  
   
}

Also I want the same image to stick to bottom of browser covering browser length.How can i achieve this?
Posted
Updated 24-May-18 2:19am
v2

It's not complicated, but it's also not that simple.

First solution:
See: Ryan Fait's - A CSS Sticky Footer that just works[^]

From the site:
CSS
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/


-------------------------------------------------------------------
Second option (Sticky Footer Solution by Steve Hatcher)
XML
<div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">

</div>



CSS
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

*/



Cheers,
Edo
 
Share this answer
 
v4
Comments
thatraja 11-Sep-13 4:30am    
5!
Joezer BH 11-Sep-13 5:08am    
Thank you!
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900