How do they create this backgorund?

I believe they do this is the CSS...I want to create a page with a background similar to this one..I like how its black and fades to red. I can easily create the graphic that looks like this but how do I implement this..

I have tried several things but with no luck...Can anyone help me??

 

uh.. what website are you referring to?

 

WOOPS sorry guys http://www.cmsathletics.org/landing/index

 

It's a 1076x1 image of that red-black black-red gradient that is repeated vertically in the center of the page. Then there is another background that's just a solid color that is the same red as the brightest red of the image containing the gradient.

You could accomplish this effect in two ways:

1. set the css background property of your container element that spans the whole browser window to:
background: #theHexOfTheRedYoureUsing url(pathToGradientImg) repeat-y top center;

2. have two container elements, one with the background set to the gradient image (basically use the method in #1 without the color parameter), and another container element with the red color background.

I found that #2 was more reliable across browsers, but try both ways and see what works for you.

 

I understand what you saying but I cant seem to get it to work right...

 

Hmm...what does it look like? Can you post a link to the site?

I have a simple tutorial that is somewhat what you need, except it uses two background images, instead of a solid color:

http://www.csswoes.com/2008/04/28/having-two-background-images-for-your-site/

Hope that somewhat helps. Let me know if it didn't.

 

here is what i am looking for...

http://www.cmsathletics.org/landing/index

see how there is black next to the body then it fades to red and its like that on both sides...that's what i am trying to go for..

 

That fading on both sides effect is just an image. They just created the image with the width of the content that they wanted in mind in order to give that effect. If you view the background image using your browser (I used firefox), it will help you understand.

Then they just applied that to the background of the container element that is centered and repeated vertically. It's no different than just applying a regular background to an element. Then inside that container element, is the element that you see with all the context of the site with a small enough width to make the gradients on each side of it visible.

Once you get that, you'll notice white on the sides of the container element if you resize the window wide enough. That's how it's supposed to be. Just put that container element in another element and set the width to 100% (or set margin: 0 auto and don't set the width), and set the new element's background-color to the exact same red as the brightest red in the background image that you created.

I hope I'm being clear enough.