I am in the process of coding my new personal site design and in some pages there will be more content then others. I would like to know how I can make the design or background stretch to fit all the content that I will be adding.

I hope that makes sense.

I can't really understand what you're saying.

Are you on about a fixed or fluid site design?
Fixed meaning a width of say 760px so it fits on all resolutions down to 800x600. Or fluid with is percentage which makes the page 100% like this forum. So the page scales to fit the resolution. Resulting in a page for all resolutions.

Is this it?

Okay let me restate what I would like to do.

I am in the process of finishing up my personal site design. The design was created on a 800x600 resolution. I will be slicing up the images and placing them into DIV's and coordinate the position with CSS.

However, for the main body part where my text will be I will need it to stretch as I continue to add content and what not.

After slicing up the images the body part may only be 300px tall and the content that I want to add on it may exceed that. So I want to be able to make the body part stretch along with the content that is added (IF NEEDED).

So you want the height to stretch?
If your images are designed correctly and your CSS and HTML is done correctly, your shouldn't have a problem stretching vertically.
You can set both a color and a background image in CSS. So if you had a content div with a specific background, and repeating that background wouldn't look right (for example, a horizontal gradient) you can also set a background color. If you do not repeat your background image, the solid color will show up after the end of the image.

Its a horizontal background image but its not a gradient, the background will look the same throughout. If works the same way as <td background="url of image"> </td>

Would I just do it this way?

<div id="bodyBackground"> Content goes here.</div>

#bodyBackground
{
background-image: "url of image";
}

You would need this:

body{background: url(images/image.jpg) repeat-y; }
That will give you a background image that repeats vertically.

LadyNRed,

You have the idea, although it seems to be strectching to the full page. Take a look.

http://www.johntdinh.com/csstest/test.html

Also if you look down you can see the bg image like cut off somehow.

Nevermind I fixed it, let me do some more work and i'll get back to this thread once I can get the whole site finished in CSS w/o errors.

Thanks again for all the help.

It WOULD stretch to the whole page because my example applied to the document body, NOT a div with an id of #body.