Getting an image to always sit at the bottom of a page.

Image, CSS, HTML, Baseline

[ncsuk]

Hey everyone. I'm having a problem aligning an image so it always sits at the bottom of the page. I would show you the page but I cant post URL's so I'll attempt to explain.

Basically something like below,

(Top Of Page)
----------------------------------------
----------------------------------------
-----------
---------

BODY TEXT AREA

(Bottom image)
---------
-----------
----------------------------------------
----------------------------------------

I think you get the idea, the bottom image is basically a reflection of the top one and I want it to always sit at the absolute bottom of the page. I don't know if you can do this with HTML or with a CSS but I was trying to figure it out for about 3 hours last night and I've had enough.

Anyone got any ideas?

[dmorison]

This isn't straight forward, becuase as in the nature of true HTML you do not control the canvas - the blank area into which your page is rendered.

Can you elaborate what you mean by "sit at the bottom" relative to BODY TEXT AREA (your words) and the size of the browser window etc. etc.

You can bodge something like this with <table height='100%'> kind of thing, but it's ugly stuff...

[ncsuk]

It doesnt matter how large the window is because it should always sit at the bottom.

[edited by: tedster at 5:34 pm (utc) on May 9, 2003]

[dmorison]

Yep - the height='100%' hack works.

Hope you don't mind, I mirrored your page to try this out.

Cheers.

[edited by: tedster at 5:35 pm (utc) on May 9, 2003]

[WibbleWobble]

You could use the background-image, background-position and background-repeat CSS [webmasterworld.com] attributes to place it at the bottom (or the shorthand - background:) and then have a margin in the content and other relevent that is larger than the image (so they don't overlap).

I'll explain in more detail if this sounds like what you're after.

[ncsuk]

How does that work out of interest anyway because im trying to make any new sites I make totally CSS controlled as I hate playing with font and header tags and setting them all the time.

[WibbleWobble]

Well, for the example I'll assume there is just one table or div.

body {
background-image: url(image.ext);
background-position: bottom center; /* the center isn't really needed */
background-repeat: repeat-x;
}

The above goes into an external file, or in style tags in the head. Or even in the body tag, I suppose.

So you've got your background image at the bottom. But the content sits on top of it, overlapping. You need to set a margin-bottom that is a great number of pixels than your footer image.

table.content {
margin-top: 5px;
margin-bottom: 150px;
}

You could alternatively apply a large padding-bottom: to the body definition, but I'm not sure if that would affect the background-image or not. I've not actually tested any of this (I'm lazy), but the theory stands, and once you understand what you're doing, its not far off.

See Nick's guides for a more indepth explanation of all things CSS: 1 [webmasterworld.com], 2 [webmasterworld.com], 3 [webmasterworld.com].

[ncsuk]

Thanks mate :P