SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict KelliShaver's Avatar
    Join Date
    Mar 2003
    Location
    Morehead, KY
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positining a BG image within a div

    I'm trying to align a background image within a div tag and I want it to sit at the bottom of the div, which is of relative height and changes from page to page. I can get it to align to the bottom of the page with no problems, but getting it to align to the div is a different story.

    Is there a way to achieve this?

    Thanks

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by KelliShaver
    I'm trying to align a background image within a div tag and I want it to sit at the bottom of the div, which is of relative height and changes from page to page. I can get it to align to the bottom of the page with no problems, but getting it to align to the div is a different story.

    Is there a way to achieve this?

    Thanks
    Hmm, someone told me the other day that you can use the vertical-align attribute with any inline element. I haven't had much success with that, but you could try it with your image.

    For the sake of example:

    <img src="myimage.htm" style="vertical-align: bottom;" />

    of course adding the alt, width, height, border blah to either the source or the style. Easier, in a head style or stylesheet:

    .vbottom {vertical-align:bottom;}

    Like I said, don't know if it will work or not...
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure what problem you are having but just set the background image in the div to bottom and it will sit at the bottom. If you have examplpe code it would be much easier.
    Anyway here's an example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .outer {
    width:500px;
    margin:auto;
    background:yellow url(pic.gif) no-repeat center bottom}
    </style>
    </head>
    <body>
    <div class="outer">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    </div>
    </body>
    </html>
    Shyflower, vertical align can only be used on inline elements within one line I'm afraid

    That is vertical align aligns elements within a single line. This is so you can align text element (and images) in relation to each other but only on that single line and not within the whole block. (It works on table-cells though.)

    Paul

  4. #4
    SitePoint Addict KelliShaver's Avatar
    Join Date
    Mar 2003
    Location
    Morehead, KY
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I gave that a try and it got the image positioned where I needed it to, but I couldnt' get the text overtop of it. I tried using another div over it with a higher z-index, but it doesn't seem to be working.

  5. #5
    SitePoint Addict CeleronXL's Avatar
    Join Date
    Dec 2002
    Location
    United States of America
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heheh, cheating the search engines a bit aye?

    Code:
      	.keywords {
     		position:absolute;
     		top:-100000px;
     	} 
      <div class="keywords">
     	<h1>morehead</h1>
     	<h1>kentucky</h1>
      	<h1>internet development</h1>
     	<h1>web developers</h1>
     	<h1>internet web designers</h1>
     	<h1>www</h1>
     	<h1>multimedia</h1>
     	<h1>new media</h1>
      	<h1>ecommerce</h1>
     	<h1>e-commerce</h1>
     	<h1>magazines</h1>
     	<h1>marketing solutions</h1>
     	<h1>graphic design</h1>
     	<h1>graphic design jobs</h1>
      	<h1>freelance graphic design</h1>
     	<h1>web design</h1>
     	<h1>design</h1>
     	<h1>freelance design</h1>
     	<h1>web site design</h1>
     	<h1>website design</h1>
      	<h1>web programmer</h1>
     	<h1>programmer</h1>
     	<h1>programming</h1>
     	<h1>web development</h1>
     	<h1>Internet</h1>
     	<h1>web site</h1>
      </div>
    So hold me when I'm here
    Right me when I'm wrong
    Hold me when I'm scared
    Love me when I'm gone.

  6. #6
    SitePoint Zealot treefrog's Avatar
    Join Date
    Mar 2002
    Location
    Lawrenceville, GA
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try something like this

    style="background-image: url(url to image); background-position: left bottom; background-repeat: no-repeat;"
    This is a css style.
    Making A Difference... www.newdayfoundation.org
    Helping Others Through Art
    www.artofgenerosity.com

    The Great Secret of the Universe www.secretofallages.com

  7. #7
    SitePoint Addict KelliShaver's Avatar
    Join Date
    Mar 2003
    Location
    Morehead, KY
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I got it sorted out thansk for the help everyone.

    CeleronXL, sure, why not? and this wasn't for my site anyway. It's for a friend's.

    treefrog, that's how I was doing it.... and it turned out to be correct..... I had a stray height:100% in another div that was screwing things up. *blush*

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by treefrog
    style="background-image: url(url to image); background-position: left bottom; background-repeat: no-repeat;"
    That's more or less what I said in my original post (except we don't like inline styles do we .

    Paul

  9. #9
    SitePoint Addict KelliShaver's Avatar
    Join Date
    Mar 2003
    Location
    Morehead, KY
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    inline styles are evil

  10. #10
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B
    Shyflower, vertical align can only be used on inline elements within one line I'm afraid

    That is vertical align aligns elements within a single line. This is so you can align text element (and images) in relation to each other but only on that single line and not within the whole block. (It works on table-cells though.)

    Paul
    Well that is exactly what I thought, however the other day when I mentioned it on another post, someone sent me a page of code to "help" me understand the vertical align property. Since I never intended to use vertical-align outside of a table cell, I just deleted it. I should have tried it out, I guess, to see if it worked. Sorry to be so confusing.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Sorry to be so confusing.
    Don't worry about it, It's' a common mistake

    Paul


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
  •