How to keep image position despite window/device size?


Tags: html,css,centering

Problem :

Here's the scenario.


I have 2 images, a background-image for a div and a regular image inside a div. My question is, how would I get each image to be in the exact position of eachother even on different window size/device? Here's an image depicting what I want.

enter image description here

Any help will be truly appreciated. My skills for HTML and CSS are not the greatest. Here's my code:

.located {
  background: url(images/located.jpg);
  background-repeat: no-repeat;
  background-position: 50% 25%;
  width: 100%;
  height: 80%;
  z-index: -1;
  position: fixed;
}
.userimage {
  margin-left: 46%;
  top: 20%;
  position: absolute;
}

html

<div class="located"></div>

<div class="userimage">
    <?php echo $userSkin3D;?>
</div>


Solution :

HTML:

<div class="located">
  <div class="userimage">
      <?php echo $userSkin3D;?>
  </div>
</div>

CSS:

.located {
  background: url(images/located.jpg);
  background-repeat: no-repeat;
  background-position: 50% 25%;
  width: 100%;
  height: 80%;
  z-index: -1;
  position: fixed;
}

.userimage {
    top: 20%;
    left: 50%;
    position: inherit;
}

    CSS Howto..

    How to identify device to make separate css for iPad and Galaxy Tab?

    How to detect mouse is over a child element in jQuery?

    How to make 3-corner-rounded triangle in CSS

    Show pseudo element between elements

    CSS: How to set height of body element to fill rest of total height excluding variable length header and footer

    How to apply custom size to text field in rails

    How to hide specific TD borders in a TABLE using CSS

    How to use css to find a list element in css alone, i.e. not be css3 dependent?

    How to make a ghost element in CSS?

    How do I use the CSS box-model to make sure my body is spaced from the edge of the window despite being 100% high?

    How to properly use CSS in GWTP?

    Show Limited Data Using jquery

    How to Make Button Tag Only Show Image Inside of it

    How to add pseudo element centered in a textarea?

    CSS: How to set a fallback for bold font families?

    How to put div under content when resize window?

    How to use google font

    How to center three DIVS with other HTML tags inside one parent DIV [duplicate]

    How do I make the dropdown menu width the same as the tab size?

    How to make a condition in CSS with an HTML attribute?

    Rotation of a div gives a black background on IE, how can I remove it?

    How to force spaces between 2 elements when position:absolute with CSS only?

    How do I get my body to the bottom of my page OR further if necessary?

    How to get the root directory of wordpress in css

    Django + Mac osx how to use less css?

    How to make elements stay within container?

    How to make dynamic content positioning?

    How to force Jade not to indent block tag?

    How do I insert tag using :after css property?

    How to make a round mask over a image