Exact positioning an image atop background/div

griebs · Joined: 05 Jul 2009 Posts: 3

For the life of me I cannot get a seemingly simple task to work:

I have 'bg.gif' which is 780x460 (small filesize tho). I would like it centered with a 5px border. I can do this no problem two different ways: centering a table and centering a background (in which case I think I'd have to add the border in photoshop).

The problem is that I cannot position "Image1.gif" or "Image2.gif"..etc where I want them on top of the background image without them jumping all over the place when I change monitor res.
I have tried absolute, relative positioning, padding, margin, V space, H space, even nesting Image1.gif all to no avail. The images do not move in respect to the bg as it self-centers but to the frameset.

Let me know if seeing code will help-- I've got several versions running comparatively complicated Javascripting for fading, swap image etc (work just fine) that I can cut out to get to the main code, just thought there might be a forehead smacking code you genies could come up with right away. Much obliged--

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

Try setting the image as the bg image of a div containter. Then set the color you want to use as the five pixel border. Something like this:

griebs · Joined: 05 Jul 2009 Posts: 3

That's it?! I was using dreamweaver and positioning WIS (what I saw) only WIS was not WIG.

Instead I used pure coding:

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

You're very welcome. Glad the code was what you needed. Thanks for using HTMLCodeTutorial.com.