CODEWITHSUNDEEP
htmlcssimagecss-position
user984621
user984621

Reputation: 48453

HTML, CSS - image inside image, how to do that?

I have this piece of HTML code:

<div>
  <div>
    <image src="image-inside-pic-png.png" alt="">
  </div>
  <image src="pic.png" alt="" />
</div>

The pic.png (300x300 px) is the main image. I would like to put the image-inside-pic-png.png (20x20 px) inside of it. When I apply position: absolute; on the small image, it works only momentarily. If I change the size of either, it no longer works.

So my question is, how can I move the small image always in the big image - and this small image will be always 15px from the top and 30px from the right margin of the big image?

Thank you for help

Upvotes: 3

Views: 49534

Answers (4)

Isha Niraula
Isha Niraula

Reputation: 1

 **html**

  <div class="images">
          <img src="./images/Rectangle.png" alt="bg"/>
          <img src="./images/lady.png" alt="lady" class="lady-image"/>
  </div>
   


**css**
      .images {
       position: relative;
       }

       .lady-image {
        position: absolute;
        top: 0;
        right: 0;
        }

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Without changing your markup this can be achieved e.g. using display:inline-block to the outermost div element (so it won't extend for 100% of the available width) and position relative + absolute for outermost div and thumbnail

see this fiddle: http://jsfiddle.net/cRqhT/3/
border and image size are defined for simplicity

Upvotes: 9

Qishan
Qishan

Reputation: 175

put both images in one div which uses position:relatvie, then apply position:absolute to images, and adjust the value as you need.

Upvotes: 0

Waiting for Dev...
Waiting for Dev...

Reputation: 13029

I think this should work:

HTML:

<div>
  <img src="image-inside-pic-png.png" alt="" class="inner-image"/>
  <img src="pic.png" alt="" />
</div>

CSS:

div {
  position: relative;
}

.inner-image {
  position: absolute;
  top: 15px;
  right: 30px;
}

Anyway, make sure you need to do this with HTML. Maybe it's better to simply edit the image with Photoshop or Gimp. Or maybe one image it's only for styling purpose, then you should use CSS.

Upvotes: 13

Related Questions