Website background...how to?

[IgnatiusTheKing]

How would one go about making a background like this? I'm talking about the gray gradient with the pattern that fades as it away moves away from the text area.

Is it just a jpg in a div set to repeat in a certain way or what? I've only started delving into web design seriously in the past few months, and while I've learned a lot about Dreamweaver and CSS in general, there is still a ton I don't understand, so even looking at a site's source code doesn't always help me.

 

[jdl8422]

just create the gradient in photoshop then crop it to something like 5 pixels wide, save the strip as a jpg. Then for your page properties use this strip for your background image repeating it across (x-repeat). Then for the background color, pick the color of the bottom of the gradient. The background color will continue where the strip left off leaving you with a seamless background. PM me or email me if I can help. Thanks

 

[MoreBS]

That's right, I'd recommend using Safari's 3.0 web inspector and you can very easily see all of the images that make up that page. (A freakin' ton

Or use FireFox firebug.

In this case they used a background that has the pattern on the left and right and the whitespace in the middle.

here is the main bg image:
http://www.experts-exchange.com/xp/images/body.gif

 

[IgnatiusTheKing]

just create the gradient in photoshop then crop it to something like 5 pixels wide, save the strip as a jpg. Then for your page properties use this strip for your background image repeating it across (x-repeat). Then for the background color, pick the color of the bottom of the gradient. The background color will continue where the strip left off leaving you with a seamless background. PM me or email me if I can help. Thanks

That's right, I'd recommend using Safari's 3.0 web inspector and you can very easily see all of the images that make up that page. (A freakin' ton

Or use FireFox firebug.

In this case they used a background that has the pattern on the left and right and the whitespace in the middle.

here is the main bg image:
http://www.experts-exchange.com/xp/images/body.gif

Great stuff! Thanks for the help.

 

[shawnathan]

How do you suppose they got it to fade from light gray on top, to dark gray on the bottom on each side?

 

[Definity]

They have two separate parts to the background process. I'd presume because their code is horrible and horrible code hurts my feeble little mind.

First, they created a background with a verticle gradient, going from white to another colour:

html, body {
  background: url(../templates/image.png) repeat-x;
  margin: 0px; padding: 0px;
}

The html/body elements will have something like that. the repeat-x marker should repeat the gradient horizontally across the width of the viewable page.

They then create another div/table wrapper, which holds the content in, giving it a width, and having a transparent image either png/gif repeating by -y (vertically).

#container {
  background: url(directory/image.png) repeat-y;
  width: 900px;
}

So, that will directly result in the gradient effect you speak of while maintaining the vertical repeating pattern.

 

[IgnatiusTheKing]

What about the drop shadow between the content area and the background?

 

[samwich]

this is their tileable background for the content.

http://www.experts-exchange.com/xp/images/outerWrap.jpg

-Sam

 

[IgnatiusTheKing]

this is their tileable background for the content.

http://www.experts-exchange.com/xp/images/outerWrap.jpg

-Sam

Cool. Thanks. I really figured they were doing something trickier than that.

 

[Definity]

If you create it properly, using transparent png's/gifs, preferably pngs for quality, you could the verticle repetition nicely with it only being 4px in height.