How to compose a picture on a picture (adaptive)?

Question

css

Here is the code:

<div style="width:100%; height: 100%; position: relative;">	
        <img src="/wp-content/uploads/2015/04/ban.jpg" alt="фон в шапке" style="width:100%" />
        <div style="position:absolute; right:500px; top:250px; height:70px;">
          <a href="#"><img src="/wp-content/uploads/2015/04/iconka.gif"  style="height:80px"/></a>
        </div>
</div>

The bottom line is that there is a picture ban.jpg in the header, against the background of this picture you need to make iconka.gif, so that when you change the resolution, iconka.gif does not crawl up or down, and is proportionally in the middle at the bottom against the background of the picture ban.jpg . How to implement this? At the moment, when changing the resolution, the iconka.gif picture floats down.

Answer 1

The first picture is a background, the second can be done as Pavel Torbeev wrote , but there is a more universal approach where you do not need to know the size of the picture:

.center {
    position:absolute;
    top:50%;
    left:50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); 
}

Answer 2

The first picture is a background, the second without absolute positioning. margin: 0 auto; Well, you can still do Inline-block.

Answer 3

A universal solution for aligning in the middle for objects with absolute positioning (if the dimensions are known, for example, 80x80):

.center {
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -40px; //смещаем на половину ширины
    margin-top:-40px; //смещаем на половину высоты
}