How can i accomplish this design?

Hey everyone,

I need to add an image to the following website:

I need to add a weird curved image but i have to make it appear on top of the content, see the attached jpeg in the footer…

How can i accomplish this?

Thanks :slight_smile:

Have you tried absolute positioning, z-indexing and then using negative margins?

For example - the top picture should have a lower z-index than the content block below and both should be absolutely positioned within their container. This will give you a gap which needs closing so on the bottom container put something like this in your CSS:


That should then close the gap and allow the top image to overlap.

If you use 32bit PNG files you can even have transparency or semi-transparency in your image.

Any help?


Thanks, check the site out now :slight_smile:

I didn’t think it would work :lol:

Thanks again

Looking good to me - well done.


I would use IE conditional comments and use a separate IE7 stylesheet - I don’t have the code here but you can google conditional comments.

Hey, just one problem, it doesn’t look right in IE7,

Is there something i can do for a quick fix?


I figured it out :slight_smile: