Using z-index to put the image within the border of a background-CodePudding

The image below is what I am intending to do:

Here is my situation right now:

My problem is I am not quite sure what to do with the z-index in order to have the image go inside the background but still over it.

Classes:

<img  src="">
<img  src="">

CSS:

.background {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  display: block;
}

.bubble_img {
   bottom: 0;
   max-height: 110%;
   position: absolute;
   right: 0;
   transition: all 1s;
   z-index: 1;
}

If I switch the z-index around (2 and 1) the image of the person just goes on the and it goes over the background borders:

Would appreciate any help, thank you.

CodePudding user response：

Instead of using the yellow background as an image, you can make it as a div element with a border-radius. Then add a overflow: hidden to partly hide the image:

div {
  width: 300px;
  height: 300px;
  border-radius: 20% 45% 45% 5%;
  background: #f5e511;
  overflow: hidden;
}
div img {
  max-width: 100%;
  max-height: 100%;
}

<div>
  <img src="https://www.pngkey.com/png/full/889-8891004_calling-girl-png-call-center-girl-png.png" />
</div>

CodePudding user response：

That can be done with the CSS mask, as in the example below (the mask image here is base64 encoded because of CORS issues when using i.stack.imgur.com):

.background {
  width: 100vw;
  height: 100vh;
  background: url(https://i.stack.imgur.com/WI6mO.png) #FE0 no-repeat;
  mask: var(--mask);
  -webkit-mask: var(--mask);
  --mask: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQsAAAEhCAYAAABoYoUCAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9bpVIrInYQcchQnSyIiuimVShChVArtOpg8tI/aNKQpLg4Cq4FB38Wqw4uzro6uAqC4A Io5OToouUeF9SaBHjg8v7OO dw333Af56malmxxigapaRSsSFTHZVCL4ihD6qGXRLzNTnRDEJz/V1Dx/f72I8y/ven6tHyZkM8AnEs0w3LOIN4qlNS e8TxxhRUkhPiceNahB4keuyy6/cS447OeZESOdmieOEAuFNpbbmBUNlXiSOKqoGuX7My4rnLc4q Uqa/bJXxjOaSvLXKcaQgKLWIIIATKqKKEMCzHaNVJMpOg87uEfdPwiuWRylcDIsYAKVEiOH/wPfs/WzE Mu0nhOND5Ytsfw0BwF2jUbPv72LYbJ0DgGbjSWv5KHZj JL3W0qJHQO82cHHd0uQ94HIHGHjSJUNypACVP58H3s/om7JA/y0QWnPn1jzH6QOQplklb4CDQ2CkQNnrHu/uap/bv3ea8/sBdcJyqF5osS4AAAAGYktHRAA4ADgAOGpoRI4AAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfmChELCx67cnEtAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAABr5JREFUeNrt3U9vVFUYwOFzh4rVUkrBsjAmJo0xAZUiU2jiRhf4EeSz Jn0I8DCJSYlSksbTQDZoxRsO52207kuJjEmps7UuX/Oufd5VsREOp1pf77vuXfGEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgHRlnoKR3vZaNx/210N PPoHed TMrWZELKZ0R877zwIIYS5Tx597XkRiyTsb3Xvh5PduyEMvPqx6cyHrDO7 u71Hx95MsSipjjs3PVSJzydnJt/YCIRC4Hg7M4tiodY/H 97bVuPthZt160b/LIZhatLmJhisDUIRYiQcnmbjx3ta/NsRAJzv5TPhvmPtsWjjbFYn9jOfeSYdoQi9MjsXk9d5MUherMh7lPHwtHk2JhmsCKIhamCURDLKadJj7O3S BaIiFtYPoOQiNPBZCgWiIxX8a3ar9ct3LgdVELE6fJrZW8nCy6wcSU4ZYCAWmjCbo1BaK7bWuUJCcvN/as7XaCukwE1OGWAgFrdKWs4zKv0mhoJkLffPfa1LpN fOTKwlYjE FN7rgbUk7eGpsq8kFLREU1ftzJMHJowoYmH9oNUadPBZ/hoiFLTZcHf0H0yThfUDJvtNS/9KScerCBXI 8lPGKWVzlQBzZowSpkselvd 34qoFkTRimxyP1PgKBxwSg8FqYKaGYwCo FqQLOEIytlWSC4WoI1CmhD4AqNBajd5UCZ/u9SePKYcGThbefQ1ODUVgsHGxCsyfzwmLhYBOmn8xjvkLigBNikvdDbzvOKb2QWOw9ufXMqwwF9WIQ55ReSCyy4etlLzEUJ8YDT2sIxBqMyM4vxAKi3Ufi uAosQDrSDWxcNcmlB2MOH7HCpgs3LUJ5RqE3vZa1xoCjJUPXq6LBTDZOlLz1RGxgGTGi3qvjogFpDRd1HjYKRaQlPoOO8UCUttGajrsnCoWe5vX3GMBNajjnalTxSLLD71qUMt0Uf07U60hkOp0UfGn04kFpDpdVPzpdGIBKU8XFZ5diAWkPF1UeHYhFmC6EAswXYgFUDGxgAao4j0jYgGNUP6HUIkFNGW62FopdboQC2iKk12TBVA/sYAmrSIlHnSKBTRKeQedYgGIBVhFxAKoeBURC0AswCoiFkDFq4hYAGIBiAUwRtHnFmIBjVXsuYVYAGIBiAUwgf3N64WdW4gFNFneN1kA1hBALACxAKK09 TON2IBjJUNX38nFsAEirmTUywAsQDEAhALQCwAsQDEAkAsALEAxAI4i73Na1N/CI5YQAtk aHJArCGAGIBiAUgFoBYAIgFIBaAWABiAYgFIBaAWACIBSAWgFgAYgGIBSAWgFgAiAUgFoBYAGIBiAUgFoBYAIgFIBaAWABiAYgFIBaAWACIBRBCns2KBTBJLC7cm/bvyKb5l/c3lnMvA8Rv7sbzbNq/w2QBiAUgFoBYAGIBiAUgFgBiAYgFIBbApIq4e1MsALEAxAIQC0AsALEA4lTUlRCxAMQCEAtALICiHOdXL4sFMNallYc7YgFYQwCxACpS5P0VYgGIBSAWwBhFXzIVC2iooi ZigUgFmAFEQughhVELACxgLYp40YssQDEAtpoEBbEAhhv4cZPWdlfQyzAVCEWYKoQC6BiYgEJK/tyqVgAYgGmCrEATBZAzFOFWECCBvlFkwUw3sLKz1kdX1cswFQhFmCqEAtonToONcUCrB9iAdYPsQDrh1gAsa4fYgHWD7EA64dYgPVDLIAY1w xAOuHWIBQiAU01tHhW1E/PrGACBwfng Lt3/NYn6MYgERuHT7lyz2xygWULOYzynEAoRCLEAoxAKEQiygPXZeLa2m LhnvHRQZSiuXv7gq4c7KT52kwVU5NWrpdVUQ2GygIqMziieJ/09mCygklCkTyxAKMQChEIsIFqDQadxoRALKFj/YCYs3HqaNfF7czUErB0mCxAKsYAo9PazVoTCGgKmCZMFlKV/1L5QmCzANGGygCL1DoatDoXJAkwTJguY1h vh98KhckCTnXQz8N7d34TCbEAK4dYgEjEGYs8mw1Z3vcsIhItMPUTtb xnHsaSUnvIA9La84krCFwaiSGYWnthUiIBVg1ol5DrCLE6M1eFt7/4plImCzg3/qHIVy5bYqIerIwXVCX33c69z788un3nomEYiEYVDI9HIVwZdX0kHwsBIOiHQ7mwuVbm LQxFiEEMKbxzfzmexPzy4TOzq5EBY/3xCFtsXin1788FH34oXh tvnPdltczyc//vPl24 FgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAuP0F5/sPjvUqUvgAAAAASUVORK5CYII=);
}

<div ></div>