CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3bootstrap-4responsive-images
mv123
mv123

Reputation: 21

Position images relative to other image while being responsive

Im trying to positionate some images over a another image (a background circle). The positioning of this images must be relatives to the current size of the background image (responsive). How can I achieve this? Directly positioning the images using relative positions?

What I currently have: HTML:

<main>
    <img src="bg-image.png" id="bg-image" class="clear">
    <div></div>
</main>

NOTE: If I put a instead of the image wont show. I dont know why.

CSS:

main {
    background: #f9f9da;
    display: block;
    position: relative;
    height: 100%;
    width: inherit;
    padding-bottom:0;
    text-align: center;
}

img {
    height: 100%;
    width: auto;
}

This works fine. I get an image that is responsive and resize itself to fit the screen without stretching.

But the next step is to posicionate images in certain places relatives to the #bg-image, eg: top-left corner, center, etc.

How can I do that? Thanks in advance.

Upvotes: 1

Views: 944

Answers (1)

Michel-Ange
Michel-Ange

Reputation: 39

I'm not sure to understand, but is it something like this ?

The position of the image is relative to the wrapper of the #bg-image

https://codepen.io/anon/pen/qJZWev

<main>
  <div id="wrapper">
    <img src="http://blog.visme.co/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-03.jpg" id="bg-image" class="clear">
    <div id="other-images">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" />
    </div>
  </div>
</main>

 

main {
  background: #f9f9da;
  position: relative;
  text-align: center;
}

#bg-image {
  height: 100vh;
  max-width: 100%;
  object-fit: cover;
  width: auto;
}
#wrapper {
  display: inline-block;
  position: relative;
}

#other-images {
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
}

#other-images img {
  max-width: 50%;
}

Upvotes: 1

Related Questions