Is there a simple way to overlap Images in Microsoft Expression Web?

Of course there is! There may be many ways to do this, but the simplest way I found out was by nesting div tags and setting background images to them. Lets us do that.

  1. In the Design view, add a div on the page by dragging it from the Toolbox task pane. This is where the larger image will be placed. 
  2. Create a style for this div by choosing New Style in the Apply/Manage Styles task pane.  
  3. In the New Style window, in the Background category, browse to the location of the larger image add it as the background image and set background repeat to no-repeat.
  4. In the Position property, choose appropriate width and height for the div. Click OK.  
  5. Now add another div, inside the above div. This nested div will contain the smaller image that is to be placed over the larger image. Then create a new style for this div.
  6. In the Background property, browse to the smaller image you want to be displayed over the larger image.
  7. In the Position category, choose position: relative, set width and height dimensions.
  8. Now you should be able to see the smaller image above the larger image. Carefully click on the smaller image to select the entire <div>. Hold down the mouse. When the mouse pointer changes to the move pointer, drag and drop the div on the larger image exactly where you want it to be placed. When done release the mouse pointer. When you move the image, left, right, top and bottom values are set according to its position on its parent element. See image below:

 overlap_design

The code for the same is given below:

<body>

<div style=”background-image: url (‘box_grad.jpg’); background-repeat: no-repeat; width: 450px; height: 300px”>

<div style=”background-image: url (‘arrow_right_green.png’); background-repeat: no-repeat; position: relative; left: 367px; top: 218px; width: 50px; height: 50px”></div>

</div>

</body>

overlap_demo

NOTE: I have added inline styles for the demo. You can create these styles in an external style sheet.

Filed Under: Expression Web

Tags:

About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (1)

Leave a Reply | Trackback URL

  1. AlexAxe says:

    Hi there,
    Super post, Need to mark it on Digg
    AlexAxe

Leave a Reply