0
HTML:
<section>
    <div class="container">
      <div class="content"></div>
    </div>
</section>

CSS:
.container {
  width: 1000px;
  margin: 0 auto;
  
  @media screen and (max-width: 800px) {
    width: 600px;
  }
}
.content {
  width: 100%;
  padding-top: 30%;
  background-image: url('image.png');
  background-position-x: 50% //  -----> related to container width???
}

I'm using padding as a percentage relative to the container's width. How can I use the same approach to position the background image?

Oleh Butsyk
  • 21
  • 3
  • the long duplicate explain percentage but at the end you will find some workarounds (the pseudo element should do the trick) – Temani Afif Sep 09 '22 at 19:48

0 Answers0