Z-index behaving funny

I have this page and i am trying to get the big image behind the right sidebar, but when i do z-index on the photo id to -1 it completely disappear and on the right sidebar the z-index doesn’t seem to be effecting

Hi, there is no image there, presumably because (of what I’ve seen) the image file isn’t there.

But anyway, onto the problem, you should really be giving z-index:1 to the right sidebar to have that appear on top.


That will allow the sidebar to sit on top of the image due to it having a z-index (which the image does not have one) :).[/FONT][/COLOR]

there is a image . if i give position to sidebar (right) it will loose it flow. i mean floats.

I did that primary div to relative and put it to right 0; however now the image of the background, i need to be position to right 0, but i see when i use relative on image and set to right:0. it attaches itself to other relative div. how can i achieve the background image to right of 0?

Edit:i tried to move to the right but it forms a big horizantal bar on page, plus the photo is covering the content (middle) area. :frowning:

You never mentioned anything about the results of my suggestion of z-index:1.

Did you try it?

yes i tried it. and the picture went to background of primary div but its not going behind the content area. i want it behind content div too

Now the #primary is at the absolute bottom of hte page on the left, why is it not overlapping the right sidebar as before? Could you return the page to how it was before?

have a look now, i changed it back as u said. however see the image is overlapping the content. i can’t send it back

I’m positive the image isn’t loading for me. It’s giving this link (actually I can’t get to it now because you keep editing the page as I speak…)

Anyway the image isn’t loading, also there is no z-index set on it (or there wasn’t before you edited the page).

The image is calling something from localhost, I do remember that.

On my end it work fine, even from server localhost however i tried z-index on image. the primary div has z-index of 1 and when i give image a z-index of -1, it disappear. this is how it looks like now

Ryan i fixed the page. have a look now


I’m lost :slight_smile: What big image?

have a look now, i had to remove the background image as it wasn’t working for me. i was using float before. but as ryan said to use position on #primary div and i did but the image was overlaping the Content div, so i was playing around and i put content div to position too. now it means i lost he liquid layout. but i m more concern about getting a full background image. but after i position the Content div. the footer is also overlapping under the Content


I still can’t really work out what you are trying to do as that page looks odd (especially with all the scrollbars) and I can’t follow your logic.:slight_smile:

If you want an image behind elements then why don’t you use a background image anyway?

You can get the image behind the content by raising the z-index on the content.

#content {
    float: left;
    overflow: scroll;
    position: relative;
    width: 70%;
    z-index: 2;

However I think you need to re-think what you are trying to achieve here as that page looks very messy and everything is all over the place. Get rid of the scrollbars in the middle and side columns and give the header a min-width to stop it wrapping . You can’t let it wrap because you have given it a fixed height and it will overlap if it wraps.

I know its messy, and scrollbars is a big turn off, but strange people do exist out there, who want a design like that. I can make it back imagee but problem is on every page it will change. besides it needs to floar to right side and the background image has more images under it but isn’t visible.

You’ll have to mock up a quick design of how its supposed to look as I can’t seem to get my head around it :slight_smile:

I don’t see how a big image like that is going to work under that column which already has images in place. It’s probably just me being thick again :wink:

well here u see there is background image. that image got like 3 images under each other but only showing two, and there is space between header and content, that i want remove too. initally my question was to how to display a picture in background like that. Ryan helped me and some help i did by putting Content div to position.I hope
i m not confusing u again? :frowning:


If you want the big right column image to bleed under the middle column also then you would need to remove the background colour from Content as that is what is covering it up.


That page is almost impossible to use I’m afraid -it’s like a sliding block puzzle :slight_smile:

what u mean :slight_smile: