CSS Fluid Image问题

Question

My background of my site is responsive and works great.But I'm having issues with the images. I want them to look "fixed" as in the same position with the background no matter the resolution,. Example re-sizing the browser from 990px by 537px to 990px by 270px the image will look like it never moved because the width/height will expand or contract depending on the resolution of the browser.

Good news I figured the CSS to make the WIDTH of the image fluid with the background! Bad news is if I make height 100% or 14%, the height looks the same. Is it true that I need to specificity my height? Why not width? How?

#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%;


}

SO my question is how would I show my image to look like its in the SAME position on the screen if my resolution is very large or very small? Please provide a example and not just a link. Like I said I figured out to make the width of the image fluid, just not the height but if you have a better way please share.

I'm using Drupal to build my site FYI.

<---------------------------------------------EDIT---------------------------------------->

Here are two example of what I am talking about. Please ignore all images BUT the image labeled 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

Answer 1

the code in js fiddle: JSfiddle

Here is how I did it with CSS:

html {
    background-color: black;
}

#master {
    position: relative;
}

#img {
    width: 23%;
    max-width: 120px;
    display: inline-block;
    background-color: red;
    position: absolute;
    bottom: 80%;
    height: 10%;
    max-height: 40px;
    margin-top: -80px;
    left: 50%;
    margin-left: -40px;
}

HTML:

<div id="master"> </div>
<div id="img"> </div>

You make an outer div ie master set it to relative position the image itself you give the properties i mentioned edit the width and height according to the image size you have, and edit margin-top and margin-left to offset it to fit it exactly to the position you wish, and it will all work fluidly, hope that helps.

as well as editing the bottom:X%; (percentage number in the X) to edit the position in the y-axis.