...

View Full Version : Question for the CSS Geniuses... How to have a 2nd Page Background image??



jamessillcock
08-19-2010, 08:54 PM
Hi,

I'm trying to work out how to have a 2nd page background image. I'm not sure how common this is, so I'm just hopeful at least someone will know!!

What it is, I've got a page background image at the moment which sticks to the top of the page (has no repeat) and about 200px or so down fades into a normal background colour.

What I want is to use another page background image which is stuck to the footer (again no repeat) and about 200px above fades into a normal background colour.

Does anyone know how to do this? I know it can be done, but don't know exactly how.

This is the what I currently have for the body CSS

background: #3B3B3B url('page_bg.gif') 50% 0 no-repeat;

Thanks, James

met
08-19-2010, 09:40 PM
i've heard of some having success setting the background of "html" and "body" but an approach I would use is this ~

Set the body to have the background and desired colour, have your page layout as normal

then near the end of it, have a

<div id="footer-BG">

or similar

which is a 100% width DIV of your second background, that sits as the very last element on the page, giving the impression of 2 backgrounds.

probably havent explained it too well so just ask if you need clarification

jamessillcock
08-19-2010, 10:39 PM
Thank you for your reply met.

Yes I understand what you are saying anout adding a div element at the very end to achieve it, but it wouldn't look as impressive, because I don't believe that way would show the footer background around the sides of the outer left and right columns at the bottom like an actual background would. Plus I have transparent margins between the center and out columns, and again I don't belive a div would go this high up, or should I say "underneath" the columsn like a page background.

Maybe I should of mentioned this in the previous message, but the designer who designed this for me originally had this in the stylesheet:

/*=INITIAL */
body {
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
background: #3c3c3c url(images/page-bottom-bg.gif) 50% 100% no-repeat;
}

Does this make any sense of how it's achived? Like what does /*=INITIAL */ mean?

met
08-19-2010, 10:46 PM
/*=INITIAL */ is just a comment



because I don't believe that way would show the footer background around the sides of the outer left and right columns at the bottom like an actual background would.


can probably be achieved through the use of z-index ~ the "footer background" sits behind the "content"

it would really help to see a live link to advise more further

in short, yes its possible, but there's a lot of specifics involved



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum