Hey Guys,

Im stuck again, im trying to get a background image to always stay at the bottom right hand corner of a DIV, the only way I have found of getting it to stay in the bottom corner is to add like a 100 &nbsp's, but that makes the code look ugly and they dont always appear in the same place in different browsers!

Im just wondering if there is some way to do with CSS, the image im trying to place in the bottom corner is:


My HTML is as follows:

<div id="rgt_wrapper">
<div id="logo">&nbsp;</div>
<div id="nav">
<li id="home"><a href="home.php">home</a></li>
<li id="about"><a href="home.php">about</a></li>
<li id="spec"><a href="home.php">specs</a></li>
<li id="gallery"><a href="home.php">gallery</a></li>
<li id="contact"><a href="home.php">contact</a></li>
<div id="body">
<div id="shade">&nbsp;</div>
<h1 class="home">Welcome</h1>
<div id="content">

<p>Welcome to Profile Coach Builders</p>

</div> <!--End of Right Wrapper-->
<div style="clear:both;height:1px;overflow:hidden"></div>
and CSS, as follows:

width: 100%;
float: right;
background: url(../images/_layout/body_logo.gif) no-repeat;
background-position: bottom right;
background-color: #4a4a4a;

width: 100%;
height: 25px;
background: url(../images/_layout/bg_content_top.gif) top repeat-x;


width: 80%;
margin: 0px auto;
padding: 0px 50px 0px 50px;
If you dont understand what Im after take a look at the site and you will see the background hidden away at the top: