CODEWITHSUNDEEP
htmlcsscentering
JLWillliamsUK
JLWillliamsUK

Reputation: 185

How to keep image position despite window/device size?

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>

Upvotes: 0

Views: 1115

Answers (1)

HelmBurger
HelmBurger

Reputation: 1298

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;
}

Upvotes: 1

Related Questions