bettygranny
New Member
I am trying to avoid my footer overlapping an image placed at bottom right corner inside a div above the footer. I have applied z-index to the container having the bottom right image, but it is still being overlapped by the footer.The CSS I am applying looks like this\[code\].content_body { margin: 0 auto; width: 100%; overflow: hidden; padding-top: 30px; background: #E6E6E0; color: #555; font-family: Tahoma, Arial, sans-serif; font-size: 14px; min-height: 800px; background-image: url(http://types4u.org/Tomike/temp/images/saturation.png) ; background-position: right bottom; background-repeat: no-repeat; z-index: 1; } #footer { background: url(http://types4u.org/Tomike/temp/images/bg2.jpg) #E6E6E0; color: white; font-family: Lato, Tahoma, Arial, sans-serif; font-size: 13px; line-height: 1.5em; padding: 40px 50px 50px 50px; clear: both; border-top: solid #000033 5px; } .design_by { float: right; font-size: 2.4em; font-family: 'tangerine', cursive; color: white; } .copyright { float: left; font-size: 2.4em; font-family: 'tangerine', cursive; color: white; } <div class="content_body"> hello </div> <div id="footer"> <div class="copyright"> <a href="http://stackoverflow.com/questions/14419254/#">mine.com</a> © copyright 2013 all rights reserved. </div> <div class="design_by"> Design by <a href="http://types4u.org" target="http://types4u.org">types 4 u</a> </div> </div>\[/code\]jsfiddle Example