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.
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.
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?
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.