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

108 thoughts on “Make Absolutely positioned background images responsive”

  1. We’re a group of volunteers and opening a new scheme in our community.
    Your web site provided us with valuable information to work on. You’ve done
    an impressive job and our whole community will be grateful to you.

    Reply
  2. 810685 769440Thanks for some other great post. Exactly where else might just anyone get that type of info in such an ideal means of writing? Ive a presentation next week, and Im at the search for such info. 713338

    Reply
  3. It’s appropriate time to make some plans for the
    future and it is time to be happy. I’ve read this post and if I could I wish to suggest you some interesting things
    or tips. Maybe you can write next articles referring to this article.
    I desire to read even more things about it!

    Reply
  4. Hi there, I believe your site could possibly be having browser compatibility issues.
    Whenever I take a look at your blog in Safari, it looks fine but when opening in I.E.,
    it has some overlapping issues. I merely wanted to provide you with a quick heads up!

    Besides that, excellent site!

    Reply
  5. Cool blog! Is your theme custom made or did you download it
    from somewhere? A theme like yours with a few simple adjustements would really make my blog stand out.
    Please let me know where you got your design. Bless you

    Reply
  6. Great items from you, man. I’ve keep in mind
    your stuff previous to and you’re simply extremely excellent.
    I really like what you’ve obtained right here, certainly like what you’re stating and the way in which by which you
    say it. You’re making it entertaining and you still care
    for to keep it smart. I can’t wait to read much more from you.

    This is actually a terrific web site.

    Reply

Leave a Comment