<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="postage-stamps">
<img src="cyclist-in-mongolia.jpg" alt="Cyclist In Mongolia" id="mongolian-cyclist" class="stamp">
<img src="mongolian-man.jpg" alt="Mongolian Man" id="mongolian-man" class="stamp">
<img src="postage-mark.png" alt="Postage mark" class="postmark">
<img src="post-mark3.png" alt="Postmark" class="postmark2">
</div>body { margin: 0; }
div#postage-stamps {
background: #ffc url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/envelope-texture.jpg) no-repeat;
text-align: right;
width:100%;
position: relative;
background-size: cover;
padding-bottom: 2rem;
}
img#mongolian-cyclist {
margin-right: 100px;
margin-top: 40px;
transform: rotate(2.1deg);
}
img#mongolian-man {
position: absolute;
right: 300px;
top: 40px;
transform: rotate(-.8deg);
}
.stamp {
width: 200px;
height: 148px;
border-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/stamp-border.png) 8 round;
border-width: 8px;
border-style: solid;
}
img.postmark {
width: 100px;
height:104px;
position: absolute;
top: 60px; right: 500px;
}
img.postmark2 {
width: 89px;
height: 51px;
position: absolute;
right: 20px;
top: 50px;
}
External CSS
This Pen doesn't use any external CSS resources.