Background Image not filling

[kman1985]

I have a horizontal gradient image that that I'm using as a background that i created in photoshop. It's 17 x 1400. But it's not filling the whole background, I thought it might be another containers problem but when i set the background color it fills the background perfect, so it has to have something to do with this image or something. I cannot figure it out. what could the problem be?

CSS:

body
{
	/* background-color: #7d7d7d; */

	background-image: url(images/bg2.jpg);
	background-repeat: repeat;

}
[/CODE]

[kman1985]

I attached 2 screen shots, 1st is using the background image, 2nd is just using background color. Idk why the background image is not working and the background color is. Thanks

[Gerowen]

Ignore this, sorry.

[primexx]

are you sure you want to repeat the background image vertically? why don't you just uncomment background-color and let the color fill in the rest, that way you have a gradient at the top that changes to the solid colour at the bottom. if you repeat the background image you're gonna get a disconnect between the top and bottom of the image.

[pto]

You're almost there. So the image is 17 wide and 1400 tall. You could save bandwidth and make it 1x1400. All we need to consider is which direction you want to tile that image, and where you want the image to tile from. We consider the position because someone may be running their resolution at 10000 x 10000. In that case you want to plan on the background image running out, and your background color picking up seamlessly. We want to have one gradient end-color set to your background color. So if your image is #7d7d7d at the bottom the background color will match.

repeat-x means repeat horizontally across the screen, so your gradient is set at 1400 pixels tall and infinite pixels wide. Since the image height is limited to 1400, we want to start your image at the top of the page. That way the bottom of your image (#7d7d7d) will match seamlessly with your background color (#7d7d7d)

Also you were missing a single ' inside of each parenthesis for the url tag.

http://www.w3schools..._background.asp

body {
background: #7d7d7d url('images/bg2.jpg') repeat-x top;
}
[/CODE]

[pto]

You say horizontal gradient, but your image shows a vertical gradient. I'm confused. Here's a set that works, take a look.

css.zip