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

Question

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

sounds like you're using a background image, which should be set via CSS. Is image-inside-pic-png.png part of the content, or is it simply used for style? — zzzzBov
– zzzzBov, Commented Feb 16, 2012 at 14:33

Waiting for Dev... · Accepted Answer · 2012-02-16 14:31:49Z

13

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.

answered Feb 16, 2012 at 14:31

Waiting for Dev...

13.1k5 gold badges54 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fabrizio Calderan · Accepted Answer · 2012-02-16 14:44:29Z

9

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

edited Feb 16, 2012 at 14:44

answered Feb 16, 2012 at 14:32

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Comments

Qishan · Accepted Answer · 2012-02-16 14:37:12Z

0

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

answered Feb 16, 2012 at 14:37

Qishan

1852 silver badges12 bronze badges

Comments

Isha Niraula · Accepted Answer · 2022-06-03 05:22:39Z

0

 **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;
        }

answered Jun 3, 2022 at 5:22

Isha Niraula

1

2 Comments

SwiftyJoeyy Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Ethan Over a year ago

When answering you should include a description of your code so that others can understand how it addresses the question as asked

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related