SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Image Postioning


    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 dont understand what Im 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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
                
            #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.

    Code:
    <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.

  3. #3
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code CSS:
    #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:

    Code CSS:
    /*
    ** 
    ** 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

  4. #4
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yikes! Paul beat me to the punch!

    I like his idea.

    Cheers,
    M


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •