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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Page background divided into three elements

    I'm working on a site, where the background consists of a gradient image at the top and another one at the bottom (both have height 100px). The "middle" part is simply a background-color which matches the color of the connecting parts of the two gradient images top and bottom.

    The site contains a number of pages, and on some pages I "risk" that the amount of stuff (text, images, content) "is not enough" to span the height of the page. The result is that I have the top gradient image, flowing over in the background image, which then again flows over into the bottom gradient image. The problem is that where the background-color part/section flows over to the bottom gradient, there is more than 100px left until the bottom of the page, meaning that I get the gradient image for 100px, followed by background-color again, until the bottom of the browser window (looks like 4 parts). This is of course most likely to happen for high resolutions.

    Is there a way I can specify that the bottom gradient should be at the bottom of the browser window if such a scenario happens (if the page content only "finishes" at, say, the middle of the page?

    Thanks,
    Kim.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100% height woes

    Although it's hard to say anything definitive without a look at the imagery and the markup/CSS, it sounds like the much asked for "how do I make a page fill at least the full height of the window?".

    There are no real bullet-proof ways to solve that; since you're going to need at least three elements to house your backgrounds, can't you arrange it such that the bottom gradient is supplemented by a matching background color extending the "end" color? That would mean you couldn't rely on the page background anymore, but I think it would be doable.

    Again, some more detailed info would help.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Attempt at explaining with code:


    HTML:
    Code:
    ...
    body {... background-color: [say, blue]; ...}
    .top {width: 100%; height: 100px;background-image: url(../images/topbar.gif);}
    .main {... width: 100% ...}
    .bottom {width: 100%; height: 100px;background-image: url(../images/bottombar.gif);}
    ...
    , where the bottom pixel of topbar.gif is [say, blue], as is the top pixel of bottombar.gif. The opposite ends of the two ...bar.gif's are [say, white].

    HTML:
    Code:
    ...
    <body>
    <div class="top"></div>
    <div class="main">
    Very little text here
    </div>
    <div class="bottom"></div>
    </body>
    ...
    Since there is only "Very little text here" in the "main" part, this "main" part would only be a few pixels high, followed by the bottom bar (bottombar.gif background). Below this bottom bar, the background color [say, blue] would fill the rest of the browser window.

    Hope this is a satisfactory explanation. This wouldn't have been a problem if I only had one image/gradient image as background, as I could use height: 100% (I think), the problem does indeed come because there are three elements.

    The site is not online yet, so no link to send, unfortunately.

    Thanks,
    Kim.

  • #4
    Regular Coder
    Join Date
    Jul 2003
    Location
    New Zealand
    Posts
    435
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i believe that CSS3 will incorporate multiple background images, but you can position background images like this:

    background-position: bottom;

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Scrowler, I haven't been able to get this to work. If possible, could you update the code with what you think it should look like?

    [Edit: From what I've been able to find out, the background-position works for background images on the body element. This won't work for me, I think, as I use a background-color for the body, and what I want at the bottom (if the page content doesn't make the page "long/tall" enough to reach the bottom of the page) is a div element.]

    Thanks,
    Kim.
    Last edited by kimlb; 03-10-2005 at 09:29 AM.


  •  

    Posting Permissions

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