0

enter image description here

Hello i want create photo like this image I want this logo to be in the upper right corner and in the person's photo

this is my code

<div style='position:relative'>
  <img src='https://i.ibb.co/gFsCTmf/orang.jpg'>
  <img src='https://i.ibb.co/hLB6zMr/logo.png' style='position:absoulute;top:-10px;right:0px'>
</div>

and this is my jsfiddle im try add position absolute in logo image and div position relative doesn't work. Help me thank's

Maestro Vladimir
  • 1,186
  • 4
  • 18
  • 38
  • add display inline-block to your div style otherwise it's width is 100% (and not the width of the image) – Pete Apr 03 '19 at 16:07
  • You'd make the outer `div` display as `inline-block`, specify `width` and `height` as auto (to make its size according to the large image size). For the small image set `position:absolute` and set its right and top properties to 0 (or whatever). – Arfeo Apr 03 '19 at 16:14

3 Answers3

1

your absolute spelling is wrong and need specific the width of image div.

<div style='position:relative;width: 252px;'>
  <img src='https://i.ibb.co/gFsCTmf/orang.jpg'>
  <img src='https://i.ibb.co/hLB6zMr/logo.png' style='display:block;position:absolute;top:0;right:0;'>
</div>
Obaidul Kader
  • 217
  • 1
  • 7
0

and it works on JSFiddle, if the position is not right please change the top and left codes.

.logo {
  width: 19%;
  position: absolute;
  top: 11%;
  left: 57.5%;
  transform: translate(-50%, -50%);
}
<img src='https://i.ibb.co/gFsCTmf/orang.jpg'>
<img src='https://i.ibb.co/hLB6zMr/logo.png' class="logo">
Abdullah Ajmal
  • 367
  • 3
  • 14
0
<div style="position:relative;width: 247px;">
<img src="https://i.ibb.co/gFsCTmf/orang.jpg">
<img src="https://i.ibb.co/hLB6zMr/logo.png" style="position:absolute;top: 
-5px;right: -5px;">
</div>
sunjeep
  • 128
  • 2
  • 15