Having Problems with css background image positioning.

[atarijake]

hello,

I have a simple two column layout with the left column floated left and the right to the right. So...

I wanted to have an image "sitting" on top of my left column and I don't want to use any extra markup so I thought I'd set image as background image of my leftcolumn div and give it a top position of -30px but the image just clips off. Is there a way around this?

Thanks!

[SuzyUK]

Hi atarijake, and Welcome to WebmasterWorld!

can you offset the left column itself by the -30px then pad the top of it with 30px to bring the text alignment back?

e.g....

#left {
float: left;
width: 200px;
background: #cfc url(hello.gif) no-repeat 0 0;
margin-top: -30px;
padding-top: 30px;
}

If you're using the overflow method of clearing a containing div for Mozilla, this will not work though and may need a clearing div or <br> if you are using clearance.

if you need more then post us some outline code for the whole structure.

Suzy