Forum Moderators: not2easy
Greetings all:
I was in need of the best or correct way to position two images based on the location of the container div.
Basically, I have the container div that contains all the sections of my website and is positioned at the top middle of the page, and I would like an image to site "behind" the top right corner of the container but 90% of the image would stick past (to the right) of the container's right border. This would probaly never change as the image is at the top, and the container will not be expanding width wise.
Then I have a "second" image that I would like to sit partially "underneath" the bottom left corner of the container - but it wouldn't only be positioned to the right of the container but also below the container as well. Visually: The bottom right corner of the container would be sitting in ontop in the middle of the image.
The trick though, is that the "height" of the page will change from page to page depending on content as it is an elastic setup as opposed to a fix width/height and if possible would like the left bottom image to adjust based on the containers position - in the case one page is longer than the next, the image will adjust.
What I have come up with is having a page with 3 columns - the center containing the Header, main, and footer, while the left and right outer columns would contain the image respectively and can be positioned using background (vertical/horizontal) positioning. I haven't tried it to know if this would be a possible option - but even if it does work, I don't know if the "left" column where the picture would have to adjust based on the length of the page would, adjust automatically.
Any advice on how to make this happen would be greatly appreciated.
Regards,
Max
<div id='container'><div id='bottomLeftImage'></div></div>
OK, an example with real numbers.
Suppose your bottomLeftImage is 200px wide and 500px high. Your style should be
#bottomLeftImage{left:-100px;bottom:-250px}
Could I do that with it and have 2 images and position them using your method and have
- #bottomleftimage
and
- #toprightimage
?
Or would i need to do what I mentioned and that is setup an outer left div and an outer right div?
<div id='container'>
...YOUR-CONTENT-HERE...
<img id='bottomleftimage' src='...'></img>
<img id='toprightimage' src='...'></img>
</div>
#container{z-index:2}
#toprightimage{right:...;top:...;z-index:1}
#bottomleftimage{left:...;bottom:...;z-index:1}
Just try it. You'll see.
(Responding to personal mail...)
1. Never do this: {z-index:-1}. It's verboten! (Besides that, it doesn't work. :)
2. {top:...}, {right:...}, {bottom:...}, and {left:...} only work for {position:absolute} and {position:relative}.
3. Since you said that you wanted the bottom-left corner of #container to be in the center-middle of #bottomleftimage, and you do have #bottomleftimage{left:-50px;bottom:-50px}, I assume that #bottomleftimage{width:100px;height:100px}. You really aught to have that as explicit CSS.
4. By all means, put #bottomleftimage and #toprightimage inside #container, not outside #container. It will work better and you might no longer need #wrapper at all!
5. If you really do need #wrapper (e.g. #container relies on background-color to occlude the images), try
#wrapper{z-index:0} /* START A NEW INDEXING SCHEME */
#bottomleftimage,#toprightimage{z-index:1} /* PUT THESE ON TOP */
#container{z-index:2} /* PUT THIS ON TOP OF THOSE */
#wrapper,#container{position:absolute} /* THIS IS REQUIRED FOR left, bottom, & z-index TO WORK */
