Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    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

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    /*=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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •