Website Background Question

[jbraden37]

Hi,

I sure hope someone can help me figure this out.

I have never had problems making a gradient background work before....but now it isn't working out for me.

I have a black to red gradient background that is for a web site I'm designing in Photoshop and when I try to do the HTML, the background isn't lining up correctly.

It would be nice to have my background show up and be seemless with the bottom red color simply continuing-on all the way to the bottom of anyones monitor resolution.

Here is an image of the photoshop site design itself:

And here is an image of how it's actually showing-up:

I hope I have made myself clear enough.

Thank you in advance.

 

[littlephoenix]

your resolution is incorrect, see attached file, make this your bg and see if it works
make sure you put "repeat bg"

 

[jbraden37]

@----> littlephoenix,

Where in my HTML do I place "repeat bg"?

Thanks

 

[jbraden37]

I did what you said. I used the image you provided and this is what it looks like after added to HTML and uploaded:

 

[PixelPusher]

This is not difficult to fix, there are a couple issues that could cause this:

1. Your bg gradient is taller than the gradient in you content, make sure they are the same height.
2. You are missing positioning in you background properties (css).

My Recommendations

1. Get the image height issue sorted (#1 above)
2. Set the body background to the lower red color for when the browser window is taller than the website layout.
3. Set the body background image to repeat and and align to the top.
4. Make sure your layout is aligned to the top.

The CSS should look like this:

body {
background: #F00 url(images/bgTile.png) left top repeat-x;
}

 

[PixelPusher]

..also if you can post a link to the site. It will help us troubleshoot the issue more easily.