Background Image Postioning

[sb44940]

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:

http://www.profilecoachbuilders.com/.../body_logo.gif

My HTML is as follows:

<div id="rgt_wrapper">
<div id="logo">&nbsp;</div>
<div id="nav">
<ul>
<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>
</ul>
</div>
<div id="body">
<div id="shade">&nbsp;</div>
<h1 class="home">Welcome</h1>
<div id="content">

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


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

and CSS, as follows:

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

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

}

#content
{
width: 80%;
margin: 0px auto;
padding: 0px 50px 0px 50px;
}

If you don’t understand what I’m after take a look at the site and you will see the background hidden away at the top:

http://www.profilecoachbuilders.com/dev

Thanks

Shaun

[Paul O'B]

Hi,

Why don't you place the image at the bottom of #wrapper because that is the only element that will be at the bottom of both columns.

e.g.

            
        #wrapper
        {
            width: 778px;
            margin-left: 10px;
            float: left;
            border: 1px solid #000000;
            /*margin: 0px auto;*/
        background:#4a4a4a url(http://www.profilecoachbuilders.com/dev/images/_layout/body_logo.gif) no-repeat right bottom;
        display:inline;/* ie double margin bug fix*/
        }

This image below is 1px to big to fit and will cause the column to drop in IE.

<img src="http://www.profilecoachbuilders.com/dev/images/_gallery/profile1.jpg" alt="Click here to see the latest pictures from Profile Coach Builders" width="200" height="269" style="border: 1px solid #000000;" />

The available space is only 270px yet you have an image that is 271px wide including its borders.

[mhulse]

Hi Shaun, nice to meet you.

Not sure if I will be of any help, but here it goes:

I am not really following your code, but then again, I have only just glanced at the actual webpage.

It sounds like you want a graphic to be at the bottom-right-hand corner of your "main content" div/column via CSS background image?

If you are trying to put a background image within a div that has no content, then the div will not auto-expand unless you give it a height, or put content in it... Maybe you should look at the min-height hack over here. See also: CSS FAQ - How to......

Also, it sounds/looks like you need to specify "bottom right" within your background property:

#body { background: url(/folder/foo.jpg) no-repeat bottom right; }

Off Topic:

I think I am confused when I see #body... I would avoid using a div that is also a name for an actual static HTML element, but that is just me.

Here is some good info on the background shorthand:

/*
** 
** For background, you don't have to specify all values.
** If a value is omitted, its initial value is used.
** The initial values for the individual background properties are as follows:
		   * color: transparent
		   * image: none
		   * repeat: repeat
		   * attachment: scroll
		   * position: 0% 0%
** Remember that when you give two values for position, they have to appear together.
** When using length or percentage values, put the horizontal value first.
** 
** Ref: [url]http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/[/url]
** 
*/

I like to put the above comment into my css for reference.

Well, I am tapped-out on ideas. I am sure others will be more helpful.

Good luck!
Cheers,
Micky

[mhulse]

Yikes! Paul beat me to the punch!

I like his idea.

Cheers,
M