Page background divided into three elements

kimlb

03-09-2005, 08:23 AM

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.

ronaldb66

03-09-2005, 08:32 AM

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.

kimlb

03-09-2005, 09:13 AM

Attempt at explaining with code:

HTML:

...
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:

...
<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.

Scrowler

03-09-2005, 09:27 AM

i believe that CSS3 will incorporate multiple background images, but you can position background images like this:

background-position: bottom;

kimlb

03-10-2005, 05:51 AM

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.