Html - Any way for a container's content and its scrollbars to not hit the edges of the container's own background image?

onlineuser1
January 20, 2024
191 views
1 vote
2 Answers

I’m working on one page of a website that only includes two vertically aligned containers in the center of it. Currently, the post element’s content and its scrollbars are overlapping with the bordered text that goes around the background images of the top and bottom containers, like this. However, I want the post element’s content and its scrollbars to fit neatly inside of the container’s respective background images with enough space around itself, like this instead. I’ve tried to play around with margin and padding sizes in the different elements, but it doesn’t seem to help. How can I achieve my desired look and outcome?

Code below.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">

*, *::after, *::before { 
    box-sizing: border-box;
}

/* must stay as is */
html,
body {
    height: 100%;
    margin: 0;
}

/* must stay as is */
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;
}

main {
    display: grid;
    grid-template-rows: minmax(0, 5fr) minmax(0, 4fr);
    justify-items: center;
    gap: 7em;
    height: 98%;}

.top {
    background: url("https://files.catbox.moe/je4qpd.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    aspect-ratio: 990 / 687;
    padding: 4%;
    margin: 6vh auto 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.bottom {
    background: url("https://files.catbox.moe/h8qi01.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    aspect-ratio: 974 / 559;
    padding: 4%;
    overflow-x: hidden;
    overflow-y: auto;
}

.post {
    justify-content: center;
    background-color: transparent;
    font-size: 22px;
    font-family:{select:font};
    color: #000;
    width: 100%;
    /* top right bottom left */
    padding: 20px 20px 20px 20px;
    margin-top: 0vh;
    overflow-x: hidden;
    overflow-y: auto;
}

</style>
    </head>

<body>

<main>
    <div class="top">
        <div class="post">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>
    </div>
    
    <div class="bottom">
              <div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           </div>
    </div>
    
</main>

</body>

</html>

Answers

Chosen as BEST ANSWER

I think I figured it out! I ended up making new separate div classes to house the two container's background images, topbg and bottombg. I wrapped those div's around the top and bottom container div's in the body section. This way, I could edit the margin and the padding sizes of the top and bottom containers in css styling, to change the placement of the post element content and its scrollbar position without having it affect the background images too.

*, *::after, *::before { 
    box-sizing: border-box;
}

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

/* 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;
}

/* css grid for container positions */
main {
    display: grid;
    grid-template-rows: minmax(0, 5fr) minmax(0, 4fr);
    justify-items: center;
    gap: 7em;
    height: 98%;
}

/* top container */
.top {
    height: 85%;
    aspect-ratio: 990 / 644;
    /* top left bottom right */
    margin: 5% 0px 0px 3%;
    padding: 0px 0px 0px 0px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* top container background */
.topbg {
    background: url("https://files.catbox.moe/je4qpd.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    aspect-ratio: 990 / 687;
    margin: 6vh auto 0 auto;
}

/* posts inside container */
.post {
    justify-content: center;
    background-color: transparent;
    font-size: 22px;
    font-family:{select:font};
    color: #000;
    width: 100%;
    /* top right bottom left */
    padding: 0px 20px 0px 20px;
    margin-top: 0vh;
    overflow-x: hidden;
    overflow-y: auto;
}

/* bottom container */
.bottom {
    height: 85%;
    aspect-ratio: 974 / 559;
    /* top left bottom right */
    margin: 5% 0% 0px 6%;
    padding: 0px 0px 0px 0px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* bottom container background */
.bottombg {
    background: url("https://files.catbox.moe/h8qi01.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    aspect-ratio: 974 / 559;
}

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
<style type="text/css">


</style>
    </head>
        <body>
            <main>
                <div class="topbg">
                    <div class="top">
                        <div class="post">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                </div>
                   </div>
                     </div>
        
        
                <div class="bottombg">
                   <div class="bottom">
                     <div class="post">
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                </div>
                  </div>
                    </div>
    
            </main>
        </body>
        
</html>

(Edit)

- chiliNUT
- January 20, 2024 at 5:28 am
- 0 votes
0
One option is to use background-attachment: local; which will force your background to be painted inside the scrollbars. The only problem is that it still respects the spacing of the scrollbar whether or not its visible. Since you have no x-scroll, it looks like this:

So that’s not ideal. In chrome/edge121+ and FF 64+, they give you the "experimental" scrollbar-width property that lets you choose how the scrollbar is rendered. Using scrollbar-width: thin or scrollbar-width: none works. Tested in Chrome Canary 122.

Login or Signup to reply.