Trouble trying to position an image behing all other divs?!

Here's another version with the img in its own div and positioned absolutely with a lower z-index of all the other main divs. It still doesn't seem to be appearing in the correct place or behind the tiled background.

http://www.peekabooagencies.com/test/testies2.html

You keep changing the coding on the pages as I'm trying to edit them with Firebug!

I do have an idea however! First things first.. where exactly is the image supposed to locate? The bottom right corner of the entire screen? Or the bottom right corner of the black part?

My idea is to create a second wrapper type div, and set the background image as your hanger, with a position of "right bottom" .. there is more to play with, but as I said, the base code of the page keeps changing lol.

Does that sound like a viable idea to you?

Where exactly is the hanger image supposed to be located? I'll keep playing around too.

Thanks for the reply Titan!

The image is supposed to be bottom right corner of the entire page. Damn I think you might have hit the nail on the head there with the second wrapper type div... how'd I miss that!! I'll give it a go too. Fingers crossed this works!

Thanks again!

Hey, no problem at all.. glad to toss some ideas around!

The issue that I was coming across however, was that the image was placing correctly (right bottom), but it was placing at the right bottom edge of the browser window.

If there were horizontal scrollbars, the image would just float where it loaded initially. I was still in the process of working through that.. watch out for that issue, and let me know if you get it working.

Or post again with some current code, and I'll try to help come up with ideas to position it correctly if need be!

Hmm yeah the bottom right of the window was where I wanted to place it but I do see what you mean RE the horizontal scroll issue. It does appear to jump back in to place if the window is maximised but it's still not an ideal solution.

I've tried here to add an extra div around all the content and position the hanger bottom right but it doesn't seem to be working.

http://peekabooagencies.com/test/testies4.html

Maybe I'm doing something wrong?! :? *

Oh yeah the height and size of div have been specified...

Cool, so that worked!! I wonder is there anyway of getting it to be right at the bottom of the window and not just the body of the page?!

Just took a look at your updated link there.. that's pretty much the point I had gotten it to. Although, I did manage to get it down to the bottom edge of the window.. I'll play around with it, and figure out what I did lol.

In the time I was playing with it yesterday, I didn't manage to get it to always set to the far right though (even when scrolling).. which isn't ideal for sure. I wish you could set 2 body background images on top of eachother!

I actually got this to work.. I don't understand how exactly, as the values that I was punching in didn't do what I thought they would do lol..

The general idea was the same, but I had to fudge some numbers by trial and error.. try these changes though and let me know if it works.

IMPORTANT: I did this with Firebug.. I have no idea if it works in IE, or any other browser. Please check that out for me!

CSS:

#hanger {
background:transparent url(../images/hanger-img.png) no-repeat right;
height:169px;
margin-top:-153px;
min-width:966px;
width: 100%;        /* This line doesn't seem to be needed as far as I can tell */
}

HTML:
Remove #hanger from wrapping around the entire page. We are no longer using it as a wrapper div.

Place it below the very last div on your page. Place it after your #site-info div. Like this:

<div id="site-info">
     Content here.. blah blah blah..
</div>
 
<div id="hanger"></div>

My idea was to use a negative top margin to bring this div up (kind of like a sticky footer method).. so that it isn't below the final div. This worked, but the top margin had to be different than the height of the div for some reason. Otherwise, it was causing that gap under the hanger picture.

Same thing for the width.. I set a min-width of your page width, but that wasn't working.. I had to modify it by a few pixels to get it to line up if there were horizontal scrollbars.

Again, please check this is other browsers, and let me know!

Good work Titan!! :thumbsup:

That's got it appearing in the right place alright. I've checked it out in IE and it seems fine. The only remaining problem is the image is still above the site-wrapper tiled bg!?

I wonder is this a problem, having one background below another background which comes before it?

hmm

Oh, you need the hanger image below the black background as well?

Hmm.. have to play around with it more I guess lol..

EDIT: The other issue with this is that the hanger scrolls back and forth due to the min-wdith if horizontal scrollbars are on the page. Is that an issue?

Yeah just above the tiled wood background would be perfect. When we put it in the hanger div that wrapped all the other divs it appeared at the right level. But that wasn't a working option.

No the scrolling of the hanger due to min-width ain't a problem at all.

Thanks for all the help!

Don't suppose you had any luck with this Titan?

I was playing around with this quite a bit last week.. to the point that I started ripping my own hair out lol.

I got it behind the black background.. I think by setting it's z-index to -1 (negative one). That worked.. but various parts of the image became invisible, and if the page got maximized, the entire thing would disappear lol.

I honestly can't think of any other ideas for this.. I hadn't worked on it at all this weekend, but I did spend several days trying to come up with something.. with no luck.

In my opinion, you've got a great looking site there.. with or without the hanger lol. I'd probably just leave it out for now.. I'm not sure if it's worth all the trouble trying to get it in there!

Oddly enough, I might have thought of one other thing to try.. so let me do that (might not be able to today), and I'll get back to you!

Thanks for all the work Titan!

Maybe you're right and it is time to stop trying to get the hanger in there. Might be the best option before we both go bald!

Let me know if your other thought works out, take your time!!

:thumbsup:

Yea, I will probably throw in the towel before I go bald because of that hanger.. that's for sure!

I've been messing with my idea, and it's very frustrating.. I get things to work, but they don't work completely. When I change something to fix the issue I end up with, that works, but something else breaks lol.

To give you an idea of my new idea.. I was playing with the position: fixed; attribute.. thinking that we could lose the hanger div completely, and just have an image set with a position that never changes. This positions the hanger fine, but I can't get the other divs to show on top of it (it doesn't go behind the black background). The odd part is that if you shrink the height of the window, it IS under the shadow you have up top.

It's very frustrating when something that "should" be so simple (in theory), is so hard to do!

I hear you. You would think that this would be very easy to do. I had a look at using multiple background images on the body AND html tag but still couldn't get it working :curse:

Finally got round to putting this site online minus the troublesome hanger. I'm having problems trying to figure out why IE6 will not display my h1 image above the other images as it does in Firefox :curse:

http://www.peekabooagencies.com/