That's what I want. I've seen a two-part background where the first part is some static image that occupies that top of the page, and when you scroll down, once you reach the bottom of that image, it is replaced with a continuous color or pattern. How is this done?

there are a couple of ways. If you have an example take a look at the source code for the page to see.

My best guess would be a body background + a page header

This can be done on as many ways, as many people is on this forum (well, maybe a little less, but not much )
From the top of my head: set a background colour that is the colour at the end of your "static image" with the image together; then you simply position the background image where you want it (top in case you've described) and turn the repeat off.

I will look into that. In the meantime take a look at this most exemplary of sites: www.studio7designs.com

This page appears to do it too: http://www.rock.cz/

7designs use layered elements with background images/colours to achieve that look.

In other words, over my head.

And the Czech site?

the same technique.

Originally Posted by Fudge

In other words, over my head.

And the Czech site?

re: Studio7 site.

They set the background of the body to #000 (black)
They also set the background of the body to also have an image (earth) with NO REPEAT, and positioned it to the center

so basically they now have a black background with a image at the top.. now for the image at the very bottom..

they then added divs (layers) to fill in the content and layout design.

then at the bottom they added a final div (probably #footer) to have a background image of the bottom of the earth

the code (from my estimate)

body {
background:#000;
background-image:url(earth.jpg) center top no-repeat;
}

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

with FOOTER having an image background set in the CSS.

but of course you need to float all of this correctly in order for it to be executed right.

Originally Posted by Fudge

In other words, over my head.

Don't be scared just because you saw a word "layer"! it's really easy, as you can see on The Conqueror's example...

Conqueror,

I gave the first bit of code a try. My goal was simply to get the first part to work before even thinking about a bottom part. Even that, however did not work. I slipped the code into the style sheet that my blog uses right under the background color, and made sure the image URL was correct. But alas it did not show up. Any idea?

Thanks.

Success. With some tweaking, I got it to work. The next step is making it repeat horizontally. I want to post a simple gradient like a sky and have that stretch/repeat across the entire screen regardless of the person's resolution. How does one do that?

Originally Posted by Fudge

Success. With some tweaking, I got it to work. The next step is making it repeat horizontally. I want to post a simple gradient like a sky and have that stretch/repeat across the entire screen regardless of the person's resolution. How does one do that?

You would need to apply that to the body so

body {
background:#000;
background-image:url(earth.jpg) center top no-repeat;
}

The red line.. this is your key.

Design whatever you want in your GFX program - if it is a simple top to bottom gradient then slice it at whatever height you want and make sure the width is no bigger than 5px (for optimal loading).

save it, then upload it and link it in the CSS above (red line).

you need to delete the CENTER code since you want it to repeat all the way from the left to right and also delete the TOP code since it will be at the top by default.

Also change "no-repeat" to "repeat-x" since you want to to repeat on the X-axis.

now save the file and you shall see a repeating gradient going across.

You might see that the bottom of that gradient image clips and doesn't match the rest of the body.. so what you do is you change the colour of your background to the EXACT same colour of the gradient images' bottom using the colour picker in your GFX program you can find out the HEX code.


Currently, the background is set at BLACK so if your gradient from TOP-down ends in black then this is a seamless integration otherwise if your gradient goes top down (green-blue) then you need to set the background to blue.


For IMAGE repeats and not simple gradients - you will need more precision.

A cloud background repeat will require a few graphical adjustments such as the very left of the cloud image being pure blue and the very right being pure blue so that when you set it as REPEAT-X.. they will connect and repeat seamlessly on your Widescreen Sony HD LED TV

Got it working. Looks great now. Thanks for your help.