Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    Hi all
    I'm trying to put 2 background images into the body: one repeat-x image part way down the page and then another repeat-x image at the very bottom. My CSS works fine having one horizontal black band across the page starting at height: 54px:
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    background: #ffff99 url('../web-design-bury-st-edmunds-images/web-design-bury-st-edmunds-bk.gif') 0px 54px repeat-x ;
    }
    I'd now like to put a simlar black band across the page right at the very bottom for the footer but as soon as I try to put a second image in the results go haywire.
    Does anyone know how to change the css so you can put one repeat-x image part way down the page and then another repeat-x image at the very bottom?

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    You could separate your page like this ...

    ===========
    header
    ===========
    body
    ===========
    footer
    ===========

    Each one of those three sections has their own background image.
    When you put them together, it appears as one image, and the body
    background stretches vertically as needed ... because the content length
    is different on your pages.

    Another good reason to divide your page ...
    You can use 1 header file (the same one) on all pages, using PHP include.
    Same with footer. That means if you have 20 pages, and you need to change
    something in the header section, you only have to edit 1 file.


  4. #3
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    Miseim - many thanks for replying but I'm afraid I wasn't quite sure about your reply.
    I currently use the - Microsoft Expression - division of pages:
    Body = the colour/picture behind the container; this stretches to the size of the scren
    Container = masthead (same for all pages), column-l, column-r, footer (same for all pages) - the container is fixed at a width of say 950px
    Any background image I set on the footer (or any other section of the container) is limited to the width of the container (950px) rather than the full width of the screen which I require.

  5. #4
    Senior Member ravensjeff's Avatar
    Join Date
    Aug 2007
    Location
    Maryland
    Posts
    125
    Member #
    15751
    Can't you take your footer out of the containing element and then assign the background? (if you want it to stay at the bottom of the screen you could use the sticky footer method)

    You can't apply two backgrounds to the body tag but I'm nearly certain you can apply a background image to both the html tag and body tag independently.

    But the former method would be the way I would go about it.

  6. #5
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    Many thanks ravensjeff - I will check out sticky footer.

  7. #6
    Junior Member
    Join Date
    Aug 2009
    Location
    Aussie.
    Posts
    10
    Member #
    19588
    I believe you cannot use 2 background images,
    but..
    You could set one as the Body background then have a div which sits behind the content with another background...

    <body>
    <div style="position:absolute;width:100%;height:100%;ba ckground-image('image.gif');">
    Page content...
    </div>
    </body>

  8. #7
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    Many thanks for replying angus930 - but wouldn't the div that sits behind the content end up in a background image the width of the content - rather than stretching to the width fo the screen as I need??


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:04 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com