Simple Question how to do this background

Kristiinatrix

New Member
How was the background done on this web page, and it works fine in all resolutions, when I try to do something like this I get a scroll in the lower resolutions:

http://www.blueskyoutfitters.com/

Thanks!

Lee

I think it's made of 3 things.

1. Body background color: dark blue
2. Body background image: white-to-blue gradient. Make an image with 1 px width and approximately 1500 px (It seems about 1,5 screenfuls to me) and use make a color gradient in it. Set it as the background image and then use background repeat: x-repeat (in CSS).
3. And the third one is probably set as a simple div with a image background. Take a high-resolution image and make the edges transparent and save it as png file (png is better than gif). To make the edges transparent, I think they used a layer mask and the radial gradient tool with one end-color set to black and the other set to transparent.*

*That's how it could be done in Photoshop.
 

PixelPusher

Super Moderator
Staff member
The gradient is a repeating image applied to the body background. The picture is a center/top aligned background image to a div element inside the body.
 
Top