Как исправить нижний колонтитул внизу, используя абсолютное положение?

Question

Вот дизайн, который я пытаюсь сделать.

Поэтому я решил поставить три части.

1. top_bg
2. содержание
3. footer_bg

Я дал absoulte позицию bg с зафиксировать сверху и снизу. Но дело это footer_bg изображение не сидит на дне, а не приходит сверху, даже если я дал Дно 0.

КОД 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 at dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor at ante. Nam a sollicitudin massa, sit amet pretium nisl. Morbi at 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, at 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 at convallis tellus. Nunc sit amet eleifend mauris. Sed diam elit, placerat a laoreet eu, facilisis gravida erat. Praesent eget ultricies nisl. Quisque vehicula cursus aliquet. Curabitur at 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 at 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 a 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 a 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, a 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 a 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 at dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor at ante. Nam a sollicitudin massa, sit amet pretium nisl. Morbi at 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, at 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 at convallis tellus. Nunc sit amet eleifend mauris. Sed diam elit, placerat a laoreet eu, facilisis gravida erat. Praesent eget ultricies nisl. Quisque vehicula cursus aliquet. Curabitur at 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 at 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 a 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 a 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> 

СТИЛЬ

#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

Почему это происходит? Здесь не используется float. В чем проблема?

На мой взгляд footer_bg parent is body, и я дал нижний 0, чтобы он соответствовал нижней части страницы. Я не знаю, почему этого не происходит.

Как получить изображение footer_bg в нижней части страницы?

Answer 1

обновление ваш CSS с

body { 
    position:relative; 
} 

и да, вы можете обновить z-index для -1

Answer 2

Вот это проверить, Как сказал Тело должно быть относительным. Проверьте здесь: [FIDDLE] [1]

[1]: http://jsfiddle.net/vinayak5192/jtm0wr4L/4/