overlapping background image problem

[Angelssin]

Hi there. I recently created a design for my new website in photoshop. Here’s the link to how I want the design to look.

http://i24.photobucket.com/albums/c7/An … ign1v4.png

As you can see, what I want is for those clouds to kind of overlap the header, the navigation and the footer but still remain as a background image that can repeat down the page no matter how far it may go.

However, this is what’s happening.

http://i24.photobucket.com/albums/c7/An … dernav.png

I’ve tried making the clouds a background image to the body as well as the wrapper, but they just aren’t coming to the top. I’m stumped on how to do this but I badly want to learn how to be able to do this kind of thing so I can go into future projects and be confident that I can do this kind of a design should the client want it.

Any help is of course much appreciated. Thanks :)

[Banzaiaap]

Hmm.. maybe increase the z-index of the cloud layer? :)

[Angelssin]

That’s worked a treat. Thanks a lot! I’ve never worked with z-index before so I’ve never really known what it was for…thanks a lot :D You learn something new every day :D

Edit: Doing this seems to have made the links in my navigation stop working. Any idea how I can achieve the effect using z-index while still being able to have working links?

Basically my background is a .png file with alpha transparency so it’s going across the width of my wrapper div, but I’m guessing that the whole div is blocking my links somehow, is there any way to get my links above the wrapper div without my navigation div going above it too?

This is what I’ve done so far. The links should work, yet they don’t.
http://angelssin.co.uk/WAC/

[Angelssin]

I’m still having problems with this, can anyone help? I’ve looked everywhere, but nothing seems to work.

[Cotton]

It looks like to me that you’re going about it the wrong way. By having one wide image with transparency you’re basically covering up everything with your image (like using a clear gif to try and protect an image from being stolen), not to mention that someone with IE6 will probably not see any of your content because it’s probably a png-24 so it’ll show up white.

What you need to do, is use two images, one on the left, and one on the right and absolutely position them with a z-index. Just make sure that your wrapper, or container div has a position:relative tag. I’m pretty sure z-index will still follow the rules if it is inside a div with relative positioning.

Code:

CSS
#wrapper {width: 900px; margin: 0 auto; position: relative;}
.cloudsLeft {position: absolute; width: 50px; left: 0; top: 0; bottom: 0; background: url(‘leftClouds.png’) repeat-y; z-index: 50;}
.cloudsRight {position: absolute; width: 50px; right: 0; top: 0; bottom: 0; background: url(‘rightClouds.png’) repeat-y; z-index: 50;}

HTML

Your content

[Author]

Posts