I am struggling to determine an effective way to layer a pair of images with the following scenario:
Image 1 – This image will always have a resolution of 340×240. It will be embedded in a site and loaded remotely. Each time the image is embedded, it will be a different image. This image should be on the bottom.
Image 2 – This image will always have a resolution of 85×85. It will be loaded remotely. It will never change. This image should be on top of image 1 and centered, both vertically and horizontally.
If the vertical order were reversed, I could easily set a CSS background of image 1 and be finished. However, since the *smaller* image is the one that needs to be on top, I am unsure of the best method to solve this with CSS.
Using multiple DIVs is not an option because this has to be reasonably user-friendly. Preferably I would like to be able to add an image, add the CSS class to the image call… and have the smaller image placed on top of it when the page loads.
Possible? I would really appreciate any help.
Thanks,
Eric
