Background image at bottom of page

theMAD2 · 6 Jul 2006 at 16:54

I'm trying to get an image to stay at the bottom of my page. The only trouble is, in FF the image is at the bottom of the largest div (in this case, my container), but it seems to be working in IE.

Here's the link

(link removed)

the CSS I've used it

Code:

background:#295FA0 url(../images/cloudbed.jpg) bottom no-repeat;

You can see on the smaller pages (in FF) the image isn't at the very bottom. Does anyone have any ideas how I can overcome this?

Cheers

JonD · 6 Jul 2006 at 17:00

Have you applied it to the body tag?

EDIT - Hmm you have, maybe?

height: 100%

theMAD2 · 6 Jul 2006 at 17:01

JonD said:
Have you applied it to the body tag?

Yup, my body tag is:

Code:

body {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:0.9em;
	color:#6484CA;
	padding:0px;
	margin-top:20px;
	background:#295FA0 url(../images/cloudbed.jpg) bottom no-repeat;
}

iCraig · 6 Jul 2006 at 17:46

Try adding this:

Code:

background-position: center bottom;

theMAD2 · 6 Jul 2006 at 18:52

iCraig said:
Try adding this:

Code:

background-position: center bottom;

Sorry mate, no luck. Horizontally it's ok, it's just on Firefox (and I would guess some other browsers) the bottom is half way up the page if the page content doesn't reach to the bottom of the screen. The only thing that half worked was making the background position fixed, but this just meant it was always at the bottom of the screen all the time, so when you scrolled down, the background stayed the same. Reminded me of myspace for some reason, yuck!

Augmented · 6 Jul 2006 at 19:24

Change your global styles block to:

Code:

/* Global styles ------------------------------------------*/

[b]html {
height: 100%;}[/b]

body {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:0.9em;
	color:#6484CA;
	padding:0px;
	margin-top:20px;
	[b]background:#295FA0 url(../images/cloudbed.jpg) no-repeat bottom center;[/b]
}

/* End of global styles -----------------------------------*/

<html> needs to be given 100% height. Looks nice

.

/edit - actually, no, that won't work as you want.

theMAD2 · 6 Jul 2006 at 22:15

Augmented said:
Change your global styles block to:

Code:

/* Global styles ------------------------------------------*/ [b]html { height: 100%;}[/b] body { font-family:Georgia, "Times New Roman", Times, serif; font-size:0.9em; color:#6484CA; padding:0px; margin-top:20px; [b]background:#295FA0 url(../images/cloudbed.jpg) no-repeat bottom center;[/b] } /* End of global styles -----------------------------------*/

<html> needs to be given 100% height. Looks nice .

/edit - actually, no, that won't work as you want.

Thanks

I haven't done anything to the page itself yet, not sure how that will go. The backgrounds are just to show the div areas and layout spacing.

The html height 100% almost worked, but it seems to be 100% of the screen, not the page. It's set at the mo so if you have a look you'll see. Is there anyway to achieve this? I've got two wrapping divs if that's any help?

Thanks

theMAD2 · 7 Jul 2006 at 09:14

Do you think the background image itself is ok? I made it 1300px wide to cater for most screen sizes, although I have had a couple of 1600x1200 and even an 1680x1050 visit since I posted the link for help. Not sure how else I could achieve this effect. It's about 35k which loads fine on my dsl but I forget the pain of modem use.

edit: I've managed to get the image down to 15k now, but that's the smallest I can get it.

SamHandwich · 7 Jul 2006 at 14:23

Having

Code:

html {
   height: 100%;
   margin: 0;
}

fixes it for me.

theMAD2 · 7 Jul 2006 at 14:27

SamHandwich said:
Having

Code:

html { height: 100%; margin: 0; }

fixes it for me.

It almost works, but if you click the about me page (where the content is longer than the screen), you'll see that it is classing the bottom of the page as the bottom of the viewable area. Any more ideas?

Scam · 7 Jul 2006 at 17:50

theMAD2 said:
edit: I've managed to get the image down to 15k now, but that's the smallest I can get it.

With a bit of trickery you might be able to tile it in PS? Get a, say, 400px part of it and repeat that? Might look horrible though

theMAD2 · 7 Jul 2006 at 19:08

Ok, finally got it sorted with this little bit of code:

Code:

html {
   min-height: 100%;
   height: auto;
}