Question : Vertical Alignment in CSS

Hello!

I have two images (image.png and background.png in the attachment), which have to be overlapped, with their bottom edge on the same line. (similar to requirement.png).

How do I do this?

I've attached the code and also a zip file containing the images and html file.

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

           
           
          <html>
<head>
<style>
#container{
vertical-align: bottom;
}

#background {
position:absolute;
}

#image {
position:absolute;
}
</style>
</head>
<body>
<div id="container">
<img id="background" src="background.png" style=""/>
<img id="image" src="image.png" style=""/>
</div>
</body>
</html>

           
         

Attachments:

background.png (5 KB) (File Type Details)

Background image

image.png (485 bytes) (File Type Details)

Foreground image

CSS.zip (6 KB) (File Type Details)

Zip file containing code and images

requirement.png (8 KB) (File Type Details)

Required positioning

Question : Vertical Alignment in CSS

Answer : Vertical Alignment in CSS

I found that there is a problem with my email server and outlook rules.