Question

I am trying to fix a picture on the bottom right corner inside a div box…so that text can rollover it

I applied the css below to achieve this but it’s not achieving the result.

.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="#">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>

An example is here jsfiddle

Answer 1

See this update again: http://jsfiddle.net/CjXxk/1/

Everything is fine with your code but I think you forgot to add background-repeat to your css 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;
}

What background-repeat does?
See this article about background-repeat on w3schools:

The background-repeat property sets if/how a background image will be
repeated.

By default, a background-image is repeated both vertically and
horizontally.

Edit:

Use background-attachment: fixed; to fix the background image. Also you can handle the footer overlap problem with z-index.