how to fix display picture bottom right corner of a div box

[hiijuvke]

I am trying to fix a picture on the bottom right corner inside a div box...so that text can rollover itI applied the css below to achieve this but it's not achieving the result.\[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;}#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/14418798/#">mine.com</a> &copy 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\]An example is here jsfiddle