Web Backgrounds

[mrsour]

Ok so here is the problem. I designed a web page using photoshop cs3. After i had the majority of it completed I wanted to open it in dreamweaver and see how it would look in the browser. The problem i found is that my background that i created in photoshop does not cover the entire window background. How would i do this?

Here is the completed web page



The background is a gradient and this is what it looks like alone.

[Buzz]

That background can not be made to cover every possible browser window size. Remember that every user has a different size window ranging from 800x600 to 2500±. Your best bet is to redesign the background to a tile that can be repeated seamlessly.

[mrsour]

yeah. that makes sense. i just didn't know if there was a way to stretch it. also how would you go about tiling a gradient?

[Buzz]

The web doesn't "stretch" anything. To tile a gradient you need it in a fashion that can be tiles... either a straight horizontal grading or a straight vertical gradient. Diagonals will not tile properly.

[mrsour]

i just dont really understand how you would tile a gradient and it would still keep the same effect. Sorry. Becuase when i think of tiling an image i think of the image repeated a few or many times and doing that to a gradient would completely change the image i am going for.

[Buzz]

It will change. As I posted, you can not use that gradient and make it tile effectively because ever user has a different screen size. You need to rethink the use of a diagonal gradient entirely.

In order for your gradient to tile it would need to be 1600x1600 pixels and that makes it approximately 66k in size. That's HUGE in terms of a background image.

You could use a simple top to bottom or bottom to top gradient like I've attached here, tile it horizontally and have a gradient that takes less than 1k to display.

Top gradient
Bottom gradient