Hi,

 

I have never had a problem doing this sort of thing before....but for some reason, I can't make it work now.

 

I am attaching an image of the site (image).

 

What I can't seem to figure out is how to get the background to look correct.

 

I want it to start with the black color up top and end with the red color and then continue with that red color all the way down.

 

You can see at the following link how the website background isn't working seemlessly:

 

Current Test SIte

 

I currently have a thin .gif image that is the black-red gradient as my background, but it isn't lining up correctly.

 

If anyone could show me how to make this work correctly, I would be eternally thankful!

 

Thanks in advance.

Hi jbraden37,

 

To create a seamless gradient background that blends with the background colour of your website, use the css repeat property where you declare your background image.

 

body {
background-color: #E50303;
background-image: url(images/background-gradient.jpg) repeat-x;
}

 

The "repeat-x" in the code above tells your gradient image to only repeat horizontally. Therefore, the gradient will cover the width of your site, and any information past the height of the gradient image will be shown over your background colour.