Hi there.

I am planning on creating a web page in Photoshop and coding it in Dreamweaver. I would like to make a website that has a background image and the content box is centered on that.

Here are two examples to help you understand what I mean:
http://www.raynelongboards.com/
&
http://www.switchbacklongboards.com/

No matter how big the screen, the background image is there and the content is centered. Is there a tutorial displaying this technique that you know about? Or maybe it is simple and you can explain it to me?

Thanks for your time,
Will

Here's a pretty good tutorial that will get you going with the large, centered background image style you're going for:

http://www.webdesignerwall.com/tutorials/h...rge-background/

As far as centering your content goes, you can always add the style "margin:0 auto;" to your main container div. For the sake of older IE versions, you might also want to put "text-align:center;" on your body style.

Here's a quick code example:



Hope that helps!

Thats really cool, thanks a lot mark!

How about a webpage such as this one? with a gradient background and the content on top of that; is the background an image like in those tutorials?

thanks again

Yep, it's just an image. An easy way to do a gradient background like pixel2life uses is to create a 1 pixel wide GIF of the gradient and just have it tile horizontally. You only need to make the GIF as tall as your gradient and you have the background color be the same as the bottom color of the gradient.

So for example, say you have a gradient that goes from #000000 at the top to #666666 at the bottom. To make it look like it's filling the page, all you need to do is put this style in your CSS:


Or you can do it in the shorthand version, like this: