CODEWITHSUNDEEP
htmlcss
Nic
Nic

Reputation: 163

Put an image over another and keep the proportions (HTML - CSS)

I have 2 images , i use one of them as background (A) and i set another image (B) over a portion the previous one. This is exactly what i want to achieve BUT,if resolution change , B image is "moving" and is no more in the position i want it to be. enter image description here

To do this i have the following HTML code

<!DOCTYPE html>
<html>
<!-- Our Custom CSS -->
<link rel="stylesheet" href="main.css">
<body>


<div class="parent">
  <!-- Backbroungimage source -->
  <img class="imageBack" src="./back.png" />
  <!-- Over image -->
   <img class="imageOver" src="./over.png" />
</div>


</body>
</html>

With his CSS

.parent {
  position: relative;
 -webkit-box-align:center;
 -webkit-box-pack:center;
 display:-webkit-box;
}
.imageBack {
  position: relative;
  top: 0;
  left: 0;


}
.imageOver {
  position: absolute;
  top: 2%;
  left:17%;

}

Can you help me and tell me what i'm doing wrong and why the image is moving wheni change resolution?

Upvotes: 0

Views: 514

Answers (1)

jla
jla

Reputation: 4770

You are aligning the second image using a percentage. Percentages are calculated based on the element's parent's properties.

For example, let's say your window has a width of 1000px. Your parent div, as a block, would expand to fit this width, so .parent also has a width of 1000px. .imageOver has a left position of 17%, which is 17% of 1000px = 170px. So for a window of width 1000px, .imageOver will be positioned 170px from its parent's left.

Now let's say you resize the window to have a width of 800px. The width of .parent is also 800px. Thus .imageOver will have a left property of 17% of 800px, which is 136px. So resizing the window from 1000px to 800px will shift .imageOver's position from 170px from the left to 136px from the left.

If you want to keep the image in the same position regardless of window size, use fixed units such as px to define its left and top properties.

For example:

.imageOver {
    position: absolute;
    top: 40px;
    left: 220px;
}

Or whatever values position the image to best fit your situation.

Upvotes: 1

Related Questions