Make Absolutely positioned background images responsive

I currently have two background images, one is relatively positioned beneath the other absolutely positioned image. This produces a result like so: enter image description here

what I am noticing, is that the container wrapper has a padding-top property of 90px yet the absolutely positioned background images ignores this completely. I am also unable to set the width or height of the divs to 100%, it seems that I have to set the height or width to a fixed height.

The desired result
The result I am trying to accomplish, is that as the screen size shrinks the images shrink as well, and the absolutely positioned div adheres to the padding and margins of the parent containers. If this is even possible I am unsure.

My code JSX code is as follows:

    <div className="App">
      <div className='h-ctr-outer'>
      <div className="h-btm-par">
        <div className="h-btm-overlay-ctr">
          <div className="h-btm-img-1"></div>
          <div className="h-btm-overlay"></div>
        </div>

        <div className="h-btm-img-2"></div>
      </div>
      </div>
    </div>

my csss code is as follows:

.App {
  max-width: 1280px;
  padding: 0 1rem;
  margin: 0 auto;
}

.h-ctr-outer {
  padding-top: 90px;
}

.h-btm-par {
  position: relative;
}

.h-btm-par {
  position: relative;
}

.h-btm-img-1 {
  height: 569px;
  width: 480px;
  background-image: url("https://i.imgur.com/uzZcw9L.jpg");
  background-size: cover;
}

.h-btm-overlay-ctr {
  position: relative;
}

.h-btm-overlay {
  position: absolute;
  box-sizing: border-box;
  height: 569px;
  width: 480px;
  top: 0;
  right: 0;
  left: 0;
  background-color: #141414bf;
}

.h-btm-img-2 {
  position: absolute;
  bottom: 59px;
  left: 59px;
  height: 569px;
  width: 480px;
  background-image: url("https://i.imgur.com/T5MiFKu.jpg");
  background-size: cover;
  padding: inherit;
  margin: inherit;
  box-sizing: inherit;
}

@media only screen and (max-width: 1280px) {
  .App {
    max-width: 1280px;
    padding: 0 1rem;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 980px) {
  .App {
    max-width: 980px;
    padding: 0 1rem;
    margin: 0 auto;
  }
}


the following link contains a code sandbox for debugging! https://codesandbox.io/s/competent-haze-omf57?file=/src/styles.css:0-1029

any and all suggestions would be much appreciated

8 thoughts on “Make Absolutely positioned background images responsive”

  1. The image will ignore this because it is absolute but the position of the div in which it is wrapped is static. To achieve the results you are looking for you need to change the position of wrapper to absolute and apply the same properties of the image.

    Reply
  2. The example:

    <html>
     <div class='wrapper'>
        <img src='whatever' class='wrapper_img'>
     </div>
    </html>
    

    The code above contains the html of the page. In this code an image is wrapped under a div wrapper. What I will do is that apply properties of the image to div as well when the position is absolute.

    CSS:

    .wrapper {
        position: absolute;
        height: 10%;
        width: 10%;
    }
    .wrapper_img {
        position: absolute;
        height: 10%;
        width: 10%;
    }
     
    

    All I am trying to say is that in the case of a image with an absolute position using a div will do nothing. Wrapping a image in a div is useless and it is waste of time. Instead you can apply the properties to image only. And use @media queries to change it’s width in an mobile phone.

    If you still don’t understand. Let me know.

    Reply

Leave a Comment