Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Footer background image
Options
-
16-04-2008 11:36pm#1Hi,
My design uses a background image at the top of the page, and another at the bottom of the page. The middle content area is a solid colour, and the two images blend into this giving a seamless look.
For the Top part, I've implemented it in the Body tag with:
body
{
background-position: top;
background-color: #122246;
background-image: url('../Images/hibernian3-topback.jpg');
background-repeat: repeat-x;
}
This works fine and I have no problems with it.
However, with the bottom area I have approached it by creating a Footer Div and applying a background image to it.
#Footer
{
margin:0px;
padding:0px;
height:160px;
background-image: url('../Images/hibernian3-footerback.jpg');
background-repeat: repeat-x;
background-position: bottom;
}
This does not work well because on higher resolution screens you can see exactly where the background image stops, and this is not at the very bottom of the page. The background image also starts a few pixels in on the left, and a few pixels from the right (as if there were padding being applied). This differs in behaviour from the top part of the page in a very obvious manner and is something I would like to fix.
I know of no way to pinning the footer to the very bottom of the page (regardless of resolution), so I said I'd ask here in the hope that a CSS guru is feeling generous enough to help
So... any ideas?0
Comments
-
The only way I can think of doing this is using height: 100% in the body or (*gasp*) in a table... but this'll only work in quirks mode. (ie. once you stick in a DTD; it's game over)
Yeah there is... #footer div will be inside <body>'s default margin.The background image also starts a few pixels in on the left, and a few pixels from the right (as if there were padding being applied).
While <body>'s background image will (for some reason) ignore this margin, the (now constrained) #footer div can't.
Set your body margin to zero, then footer will be able to fill the whole width of the page.
Like a lot of layout problems, I'd opt for changing your approach.
I'm not sure exactly what you're going for, but I'd personally abandon trying to work the whole body... use a solid colour or seemless pattern for the body background and just work your background-image stuff within a big div, where the end of the "page" is where ever your html stops rather than where ever the browser window ends.
I'd say save yourself the ass-ache and just do what everyone else does.
0 -
DonkeyStyle \o/ wrote: »The only way I can think of doing this is using height: 100% in the body or (*gasp*) in a table... but this'll only work in quirks mode. (ie. once you stick in a DTD; it's game over)
Yeah there is... #footer div will be inside <body>'s default margin.
While <body>'s background image will (for some reason) ignore this margin, the (now constrained) #footer div can't.
Set your body margin to zero, then footer will be able to fill the whole width of the page.
Like a lot of layout problems, I'd opt for changing your approach.
I'm not sure exactly what you're going for, but I'd personally abandon trying to work the whole body... use a solid colour or seemless pattern for the body background and just work your background-image stuff within a big div, where the end of the "page" is where ever your html stops rather than where ever the browser window ends.
I'd say save yourself the ass-ache and just do what everyone else does.
Hi, many thanks for your reply. I'll certainly try your suggested approach later on this evening when I get home.
Even if that doesn't work, you've provided me with the info I need to get this website looking reasonably well - thanks
0 -
-
Put the footer image in the body tag and position that to "bottom".
Then put your whole site in <div> that is 100% width, set the background to the top image and position "top".
No need for quirks or tables
I see, so pretty much the reverse of the way I'm doing it now? Nice one, will try that!0 -
Hmm, this works well in IE6, but the problem I'm seeing in the other browsers I've tried (FF, IE8, Safari, Opera) is that <body> won't automatically grow to fill the whole depth of the browser window, rather it expands only as far as it needs to to fit the content (put a border on body and you'll see it)... which is a problem if every page on the site isn't long enough to exceed the maximum vertical screen size someone may be using.Put the footer image in the body tag and position that to "bottom".
Then put your whole site in <div> that is 100% width, set the background to the top image and position "top".
No need for quirks or tables
It might do the job, but it's a bit messy.
Which was why I was farting around with height: 100%.
There might be another way to do it with absolute positioning, but I can't figure out how.0 -
Advertisement
-
Advertisement