The main, article, and section elements are working together as a responsive flex container that contains posts displayed against their own background image on my website. But I need a fix for the article background image so that it stops skewing to the top-left upon window resizing, and acts responsive but stays aligned with the section in the center of the page instead.

My second and most urgent question however, is that I also want to place this image directly underneath my existing container, and have it act responsive during window resizing in conjuction with my existing container as well. I’ve drawn a mockup example of how I would like it to look, here. How can I go about adding another element capable of including and doing this?

/* removes empty space at the bottom of the entire page */
html, body {
    height: 100%;}

/* entire page */
body {
    background-size: cover;
    background-attachment: fixed;
    background-image: url('https://files.catbox.moe/jn5kb6.png');
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
    overflow:hidden;}

/* container */
main{
    display:flex;
    justify-content:center;
    margin-top:-6vh;
    /* top right bottom left */
    padding: 25px 25px 25px 25px;}

/* posts inside container */
section{
    background-color:transparent;
    font-size:22px;
    color: #000;
    width:35%;
    height:40vh;
    padding:20px;
    overflow-x:hidden;
    overflow-y:auto;}

/* container background image */
article{
    flex:0 0 auto;
    width:100%;
    height:70vh;
    background-image: url('https://files.catbox.moe/7g19g9.png');
    background-size:contain;
    background-repeat:no-repeat;
    /* top right bottom left */
    padding: 45px 45px 45px 45px;
    overflow:hidden;}
<html>

<head>
  <style>

  </style>
</head>

<body>
  <article>
    <main>
      <section>
        div elements for posts with scrollbar here
      </section>
    </main>
  </article>
</body>

</html>

New contributor

online-user-1 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.