Originally Posted by queirdo
I have a webpage with a few divs, one of which contains the written content of the page.
How can I make an image align to the very bottom right corner, so that it appears underneath the content of the page?
I can do this by setting a background image for the body, and setting the position of the background image to bottom right, but this only works in IE & Safari, and shows no image in Firefox.
My next thought was to create a div with the background image and align it to the very bottom right corner, but I can't seem to figure out how. I can only get it to align to the bottom of the 'window', but when there is enough content on the page to cause it to scroll, the image sits in the middle of the content. I can't put it directly under the content inside the same div because of the margins - it won't align all the way to the right side.
I'm curious about why the background-image placement did not work in FF. I would guess that there is a problem with your coding somewhere that's causing that issue. Are you coding with a valid doctype
and using the HTML validator
as you go? If not you should definitely start. There's also an old adage around here: "Code it for Firefox then hack it for IE." Doing it the other way around is much harder and consumes loads of time.
The first way you tried it sounds like the way to go but if you're going to do option 2 from above don't
bother with the div part. Just add the image as an <img> element. Use a
to get past the margins on the main content area. This is just speculative code, of course, without having seen what you are working with.
If you can provide a link to your live test page that would be the absolute best thing. Second-best would be to provide the full source code HTML/CSS and probably even the image you are trying to place.