Hey. Can anyone help me do this?

How do I get an image to sit on the bottom of it’s containing div and then also bust out of the top of the div?

So if my image is 200px high, and I guess I can set my div to be 175px and my image will then just poke out the top of the div.

I also want the image to appear to overlap stuff like the top border of the div and borders of other elements in the div. (Like the chef at the bottom of the guardian’s homepage today: http://www.guardian.co.uk/) But I can’t seem to get the css to work.

My starting point::

Thanks if you can help!

it’s hard to say without seeing a more in-depth example, but you’ll probbly need to define a z-index for all of the elements you want the image to overlap (if your image’s z-index is 1, it isn’t going to overlap anything). is part of your image transparent? are the items that it is supposed to overlap fixed, or might they change? If they won’t change, you could just fake it and include the overlapped items as part of the image. If they will change, you can do it using a combination of transparency, z-index and positioning.

Try setting the width and height properties of your image in the IMG tag.

hi pie,

not sure, but try setting position:relative on div#foot, then set position:absolute on your img and give the img a negative “top” value ...

just one thought

ted