The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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.

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

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:

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.)

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.

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