* { box-sizing: border-box; }
body {
    margin: 0;
    overflow-x: scroll;
    width: 400vw;
}
#foreground {
    width: 400vw;
    position: absolute;
    bottom: 0;
    height: 50vh;
    background: repeating-linear-gradient(-45deg, transparent 0, #000 1px, transparent 0, transparent 50%), 
        linear-gradient(to right, deeppink, blue);
    background-size: 20px 20px, auto;
}

#background {
    background: repeating-linear-gradient(45deg, transparent 0, #000 1px, transparent 0, transparent 50%), 
        linear-gradient(to right, purple, red);
    background-size: 40px 40px, auto;
    height: 100vh;
    width: 250vw;
    position: fixed;
    transform: translateX( calc(var(--x, 0) * -.25));
}
#inner {
    width: 400vw;
    display: flex;
    position: absolute;
    bottom: 50%;
    gap: 40vw;
    padding: 0 20vw;
}
#inner div {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background: #000;
    border-radius: 100%;
    transform: translateY(50%);
}