html - How to fix a footer at bottom using absolute position? -

here design i'm trying do.

so decided put 3 part.

1. top_bg
2. content
3. footer_bg

i have given absoulte position bgs fix @ top , bottom. thing footer_bg image not sitting @ bottom instead coming @ top though have given bottom 0.

code markup

<div id="top_bg">     <img src="https://images.unsplash.com/photo-1438368915865-a852ef86fc42?q=80&fm=jpg&s=15e4744077e36852ba57f46f4660dc7a" /> </div>  <div id="content">      <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. maecenas semper, massa quis aliquet rhoncus, diam lorem euismod ante, sed vulputate nulla magna id dui. sed sit amet libero mi. fusce suscipit, lorem @ dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor @ ante. nam sollicitudin massa, sit amet pretium nisl. morbi @ velit maximus, commodo ligula vel, pharetra dui. vivamus mollis mi eget nunc accumsan scelerisque. fusce non mauris sit amet nibh malesuada faucibus.</p>  <p>donec feugiat, tortor eget interdum rhoncus, nunc felis dictum mauris, @ convallis elit turpis quis sem. donec enim augue, tempus ac scelerisque euismod, congue sed nisi. vestibulum sed fermentum nisi, nec lacinia mi. duis ut consectetur sem. pellentesque lacinia ipsum eu sapien iaculis, ut varius libero hendrerit. phasellus non turpis augue. nam ut felis dapibus, viverra arcu et, tincidunt neque. in @ convallis tellus. nunc sit amet eleifend mauris. sed diam elit, placerat laoreet eu, facilisis gravida erat. praesent eget ultricies nisl. quisque vehicula cursus aliquet. curabitur @ diam volutpat, tempor ante eu, cursus dolor. integer laoreet, est sed lacinia ultricies, quam massa cursus est, vitae pulvinar nibh lectus sed elit.</p>  <p>aenean cursus porttitor eleifend. morbi ultrices eleifend eros, ac posuere tellus lobortis vestibulum. aenean eu dolor nec elit ultrices cursus @ sed magna. donec quis porta nulla, in dictum arcu. pellentesque porttitor dui vitae euismod consectetur. pellentesque id tellus viverra, vulputate nisi sit amet, ultricies nibh. in hac habitasse platea dictumst. praesent pharetra ex dictum consectetur. fusce finibus sapien vel iaculis mollis. nunc vel luctus enim.</p>  <p>aliquam lacinia vestibulum tempor. etiam pellentesque, felis nec commodo cursus, sem mi feugiat dolor, sed dignissim ipsum lectus vel risus. cras dui eget lacus mattis volutpat in sed tortor. aliquam lobortis sapien sit amet pharetra varius. donec eget aliquam nisi. morbi quis mattis quam. nullam porta suscipit dignissim. in hac habitasse platea dictumst. praesent in dui id dui porta lacinia. nam odio tortor, volutpat non auctor id, placerat nec augue. suspendisse quis pretium ligula, quis accumsan tortor. cras eu est vitae orci egestas rhoncus eu non dolor. integer vehicula suscipit magna ut varius. maecenas sagittis leo id nisl sagittis viverra.</p>  <p>vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; proin sed consectetur neque, pellentesque turpis. sed quis orci diam. aenean vel ultricies ipsum, id accumsan mi. sed hendrerit sollicitudin nisi bibendum hendrerit. duis nec hendrerit ipsum. suspendisse congue mauris ut viverra dapibus. fusce ut blandit nisl. lorem ipsum dolor sit amet, consectetur adipiscing elit. vestibulum luctus sapien et felis dictum aliquet. pellentesque pretium leo. duis rhoncus bibendum fermentum. proin ac massa euismod, pretium odio vel, vehicula risus. aenean posuere eros non orci maximus, tristique varius felis elementum. etiam eget maximus massa, in facilisis ipsum. integer eleifend auctor diam scelerisque tempor.</p>       <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. maecenas semper, massa quis aliquet rhoncus, diam lorem euismod ante, sed vulputate nulla magna id dui. sed sit amet libero mi. fusce suscipit, lorem @ dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor @ ante. nam sollicitudin massa, sit amet pretium nisl. morbi @ velit maximus, commodo ligula vel, pharetra dui. vivamus mollis mi eget nunc accumsan scelerisque. fusce non mauris sit amet nibh malesuada faucibus.</p>  <p>donec feugiat, tortor eget interdum rhoncus, nunc felis dictum mauris, @ convallis elit turpis quis sem. donec enim augue, tempus ac scelerisque euismod, congue sed nisi. vestibulum sed fermentum nisi, nec lacinia mi. duis ut consectetur sem. pellentesque lacinia ipsum eu sapien iaculis, ut varius libero hendrerit. phasellus non turpis augue. nam ut felis dapibus, viverra arcu et, tincidunt neque. in @ convallis tellus. nunc sit amet eleifend mauris. sed diam elit, placerat laoreet eu, facilisis gravida erat. praesent eget ultricies nisl. quisque vehicula cursus aliquet. curabitur @ diam volutpat, tempor ante eu, cursus dolor. integer laoreet, est sed lacinia ultricies, quam massa cursus est, vitae pulvinar nibh lectus sed elit.</p>  <p>aenean cursus porttitor eleifend. morbi ultrices eleifend eros, ac posuere tellus lobortis vestibulum. aenean eu dolor nec elit ultrices cursus @ sed magna. donec quis porta nulla, in dictum arcu. pellentesque porttitor dui vitae euismod consectetur. pellentesque id tellus viverra, vulputate nisi sit amet, ultricies nibh. in hac habitasse platea dictumst. praesent pharetra ex dictum consectetur. fusce finibus sapien vel iaculis mollis. nunc vel luctus enim.</p>  <p>aliquam lacinia vestibulum tempor. etiam pellentesque, felis nec commodo cursus, sem mi feugiat dolor, sed dignissim ipsum lectus vel risus. cras dui eget lacus mattis volutpat in sed tortor. aliquam lobortis sapien sit amet pharetra varius. donec eget aliquam nisi. morbi quis mattis quam. nullam porta suscipit dignissim. in hac habitasse platea dictumst. praesent in dui id dui porta lacinia. nam odio tortor, volutpat non auctor id, placerat nec augue. suspendisse quis pretium ligula, quis accumsan tortor. cras eu est vitae orci egestas rhoncus eu non dolor. integer vehicula suscipit magna ut varius. maecenas sagittis leo id nisl sagittis viverra.</p>   </div>  <div id="footer_bg">     <img src="https://images.unsplash.com/photo-1438480478735-3234e63615bb?q=80&fm=jpg&s=8fddc1c4c240e145cf6b65a21ae92087"> </div> 

style

#top_bg,#footer_bg{     position:absolute;     z-index:-99999; } #top_bg,#footer_bg img{     width:100%; } #top_bg{     top:0; } #footer_bg{     bottom:0; }  #content{     background-color:white;     margin:40px;     margin-top:100px;     padding:10px; } 

jsfiddle

why happening? there no float used here. problem?

to thinking footer_bg parent body , have given bottom 0 should fit @ bottom of page. don't know why not happening.

how have footer_bg image @ bottom of page?

update css

body {   position:relative; } 

and yes can update z-index -1