How to Overlap Image Layers in Dreamweaver

Updated February 21, 2017

Designing a website is like a cross between solving a jigsaw puzzle and creating a collage -- you have quite a bit of free reign to organise the "pieces" of your site, which may include pictures. Take advantage of Dreamweaver's quick graphics import and placement process to overlap your images, giving your Web pages an attention-getting look, creating panoramas and designing something Internet visitors may spend time "puzzling" over.

Open Dreamweaver. To overlap images on an existing Web page, click the "Open" link, browse to the site and double-click it. Otherwise, click the "HTML" link under "Create New."

Click the "Insert" menu at the top of the "Dreamweaver" workspace. Click "Image." Navigate to the first image to use for overlapping and double-click the file. Dreamweaver doesn't import multiple graphics at once. Repeat to add all of the other images for overlapping so they appear on the Dreamweaver page.

Click and drag one image into place on the page to serve as the "anchor" for the other pictures to overlap.

Drag the next picture so it is overlapping, such as obscuring about an inch of the right side of the first picture.

Repeat until each of the pictures are slightly overlapping each other in the design of your preference.

Cite this Article A tool to create a citation to reference this article Cite this Article

About the Author

Fionia LeChat is a technical writer whose major skill sets include the MS Office Suite (Word, PowerPoint, Excel, Publisher), Photoshop, Paint, desktop publishing, design and graphics. LeChat has a Master of Science in technical writing, a Master of Arts in public relations and communications and a Bachelor of Arts in writing/English.