How do you layer images together

6 replies
1956 views
Translate

How do you layer multiple images together.

This topic is closed to new replies. Start a new post to keep the conversation going.

Jon FritzCorrect answer

Community Expert

Generally, I would do that in Photoshop, then bring the composite image over to DW as a PNG (if some transparency is necessary).

In Dreamweaver, you would use the CSS property position:absolute, then drag your images to where you want them in the Design View window, or set top and left settings in the css. However, unless you're very familiar with how to make it work correctly, you'll end up with a mess, especially on small screens.

Nancy OShea

Community Expert

Layering images on the web is not a good practice. As Jon said, make your layered image in Photoshop and then use File > Export > ExportAs > JPG or PNG with transparency. Make sure to lower the quality slider to reduce file size and save bandwidth. See screenshot.

Translate

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Correct answer

Community Expert

Generally, I would do that in Photoshop, then bring the composite image over to DW as a PNG (if some transparency is necessary).

In Dreamweaver, you would use the CSS property position:absolute, then drag your images to where you want them in the Design View window, or set top and left settings in the css. However, unless you're very familiar with how to make it work correctly, you'll end up with a mess, especially on small screens.

Translate

aaronw51765599Author

Known Participant

Then will I be able to isolate certain layers for links and rollover effects?

Translate

Jon Fritz

Community Expert

With a composite image, you could use a responsive image map javascript (there are a bunch available online). Standard image maps won't scale with the image in responsive sites. The coordinates for the hot spots are fixed, so if the image shrinks/grows, they won't be in the correct positions anymore.

Adding rollovers to multiple images that are stacked using the position:absolute method has its own issues, but would generally be easier, especially if you're not familiar with the script you'd be using on a composite image. The trickier part of using stacked images would be in getting them to be responsive so they don't fall apart on mobile devices.

It ultimately depends on the code you come up with though.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.