The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Image Layering

  • # March 17, 2010 at 2:29 am

    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.


Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed