0

I'm creating a layered parallax page that is triggered by the scrolling of the mouse. I've managed to set this up and the layers all move how I want them to. Unfortunately, I've run into a problem with the background image of the body. On the left side of the screen, there is a gap that shows the background behind it.

Gap that shows the background: Gap that shows the background

I've tried many different solutions but none of them seems to work. Any suggestions will be greatly appreciated.

here's the snippet of my HTML that involves the section with the layers

<section>
        <img src="./Images/stars.png" id="stars">
        <img src="./Images/moon.png" id="moon">
        <img src="./Images/mountains_behind.png" id="mountains_behind">
        <h2 id="text">Moon Light</h2>
        <img src="./Images/mountains_front.png" id="mountains_front">
    </section>

and here's a snippet of the CSS

{
    margin: 0;
    padding: 0;
    box-sixing: border-box;
    overflow-x: hidden;
    scroll-behavior: smooth;

    }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(#2b1055,#7597de);
}

section {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 100px;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

section img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;

}
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
98SSVM
  • 49
  • 1
  • 7
  • 2
    Your first css block is missing its selector. – Fabian S. Oct 15 '21 at 13:09
  • Add `margin: 0; padding: 0` to the body selector. – Michel Oct 15 '21 at 14:03
  • Does this answer your question? [How wide is the default \`\` margin?](https://stackoverflow.com/questions/13127887/how-wide-is-the-default-body-margin) – Michel Oct 15 '21 at 14:04
  • The property `box-sizing:` has a small type-o 'box-*sixing*:' as well. This might be one issue (*not the most striking one such as the selector missing*), due to the box-sizing defaulting to `border-box: content-box;` which adds the borders on the outside instead of the intended inside. – andiOak Oct 15 '21 at 17:28
  • @andiOak thank you for your help- fixed the problem instantly :) – 98SSVM Oct 15 '21 at 19:09
  • 1
    @FabianSchöner Hi this helped, thank you – 98SSVM Oct 15 '21 at 19:10

1 Answers1

0

I would structure the first two selectors like this:

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box; /* put these last two in a 'html {}' only selector if they are intended to be different */
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: linear-gradient(#2b1055,#7597de);
}

Btw, changed the type-o of box-sixing to the right property :). Never used that one before, will come very handy, thanks.

andiOak
  • 356
  • 3
  • 9