CSS: How to chop up a complex background

Hi all and thanks for reading. I'm a web designer and to date I've used either simple gradient backgrounds, tiled backgrounds or solid colours in my designs. I've done a design for a client that includes a sky background with clouds but I'm not sure how to cut it up.

The problem for me is that the sky is not all a solid colour, as it's an actual photograph of the sky. I've included a screen shot of the basic design. Can anyone tell me how I would apply this in CSS?

Thanks in advance,

Anthony

Attached Images

mock-up.jpg (17.3 KB, 7 views)

make the edges fade into a solid color, that way if the viewport is larger than the background it will blend.

__________________

Hi and thanks for the reply. I will try and make it fade into a solid colour but then what would be the css? background-color: whatever the solid was, and then a background-image of that layout which is centered?

Also, If I was able to clone stamp that sky and make the image 1600 or so, could I then use it and apply some kind of CSS to make it fit most browser windows, but cap it at 1600px wide if you understand what i'm saying?

yeah

Code: Select all

background:url(foo.jpg) no-repeat center top;

__________________

You're a legend. Thanks a lot!

Forgot to add yo also need to append your solid color so it would be

Code: Select all

background:#coloravluehere url(foo.jpg) no-repeat center top;

__________________