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

4 thoughts on “Make Absolutely positioned background images responsive”

Leave a Comment