Even though my site background is responsive and functions well, I am encountering problems with the images. I want them to appear "fixed" in the same position as the background, regardless of resolution changes. For example, resizing the browser from 990px by 537px to 990px by 270px should result in the image maintaining its position without moving, adjusting its width/height based on the browser's resolution.
I managed to create CSS that makes the WIDTH of the image fluid with the background, which is great news! However, setting the height to 100% or 14% yields no visible change in height. Do I need to specifically define the height? Why does the width work differently? How do I achieve this?
#block-imageblock-4{
width:26%;
height:14%;
margin-top:7%;
margin-bottom:1%;
margin-left:37%;
margin-right:36.5%;
max-width:100%;
max-height:100%;
}
Therefore, my question is how can I ensure that my image remains in the SAME position on the screen regardless of the resolution being very large or very small? Please provide an example instead of just a link. Although I have succeeded in making the width of the image fluid, achieving the same for height has been challenging. If you have a better approach, I would appreciate your guidance.
Just so you know, I am using Drupal to construct my website.
<---------------------------------------------EDIT---------------------------------------->
Here are two examples illustrating my concern. Please focus only on IMAGE1.
CSS for Image1:
#block-imageblock-4{
width:26%;
height:14%;
margin-top:7%;
margin-bottom:1%;
margin-left:37%;
margin-right:36.5%;
max-width:100%;
max-height:100%;
}
First Image - Browser Resolution: 480px by 356px
Second Image - Browser Resolution: 520px by 630px