CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ASR
ASR

Reputation: 3549

overlap one image on the other image in css

I have 2 images, I have to display one image on the other image.I need to display the 2 images like below exactly. enter image description here

The following is the code which I have tried, its not coming prperly.can any one please help me to fis this issue?

.my_banner{
    background-image: url('https://i.sstatic.net/E4s7Z.gif');
    background-repeat: no-repeat;
    position:absolute;
    top: 0px;
    left: 150px;
    width: 100%;
    height: 100%;
    z-index: 100;
}
<div>
    <img class="my_banner"></img>
    <img src="https://i.sstatic.net/rQ8Ku.jpg" width="100%" height="100%"></img>
</div>

Upvotes: 0

Views: 59

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122027

Try this https://jsfiddle.net/2Lzo9vfc/8/

HTML 

<div class="banner">
  <img src='https://i.sstatic.net/E4s7Z.gif' alt=""> 
</div>

CSS

.banner {
    background: url('https://i.sstatic.net/rQ8Ku.jpg');
    background-size: 100% auto;
    background-position: top center;
    position: relative;
    background-repeat: no-repeat;
    height: 200px;
}

.banner img {
    left: 12%;
    position: absolute;
    width: 12%;
}

Upvotes: 0

fuyushimoya
fuyushimoya

Reputation: 9813

You may use position: absoulute; and adjust the top and left to fit it.

.block {
  position: relative;
}

.overlap {
  position: absolute;
  width: auto;
  height: 60%;
  top: 15%;
  left: 13%;
  z-index: 100;
}
<div class="block">
<img src="https://i.sstatic.net/rQ8Ku.jpg" width="100%" height="100%" />
<img class="overlap" src="https://i.sstatic.net/E4s7Z.gif" />
</div>

Upvotes: 2

Related Questions