Website Design Forum

**rakoom2002** · 01-21-2009, 01:34 PM

Ive noticed that a lot of templates and professional web pages have their websites content centered and then to the left and right side they will have a design of some sort, or just a different color. What is the proper term for this, I know there are headers and footers the go on top and bottom but what would it be called for things that go on either side. plus, how would u go about center the body of the content and still having a background image that wraps Around the content?
http://csscreme.com/gallery/ortobit/
http://csscreme.com/gallery/christian_jakubaszek/
http://csscreme.com/gallery/mindxstudio-portfolio/
http://csscreme.com/gallery/nicolehanusek/
http://csscreme.com/gallery/luisalarcon/

etc...

sorry if my explanation was confusing.

**stevej** · 01-21-2009, 01:51 PM

Quote:

Ive noticed that a lot of templates and professional web pages have their websites content centered and then to the left and right side they will have a design of some sort, or just a different color.

They are called sidebars. Or at least that's what I call them.

Quote:

plus, how would u go about center the body of the content and still having a background image that wraps Around the content?

You set the body to have a background image using code similar to:

Code:

body {
background: url("http://yourwebsite.com/yourimage.jpg")
}

- Steve

**LadynRed** · 01-21-2009, 03:02 PM

Actually, you can achieve some really interesting effects by 'stacking' divs each with a different part of a background. I have done designs where I have a bg image set on the <body>, another on a "container" div, and yet another on a "wrapper" or "content" div to get an effect.

**rakoom2002** · 01-21-2009, 07:03 PM

Quote:

Originally Posted by LadynRed

Actually, you can achieve some really interesting effects by 'stacking' divs each with a different part of a background. I have done designs where I have a bg image set on the <body>, another on a "container" div, and yet another on a "wrapper" or "content" div to get an effect.

Could you please elaborate, or do you know of a tutorial on this topic?

**stevej** · 01-21-2009, 07:27 PM

I doesn't take a tutorial. She's talking about something like this:

Code:

<style type="text/css">
body {
background: url("image1.jpg");
}
.container { 
background: url("image2.jpg");
}
.content { 
background: url("image3.jpg");
}
</style>

<div class="container">
<div class="content">
</div>
</div>

Very simple, really.

- Steve

**LadynRed** · 01-22-2009, 11:49 AM

Try taking a look at the many layouts at www.csszengarden.com.