The easiest solution would be to make the body background background-attachment:fixed (on body{}) which I thought you were doing in the real page to avoid the background sliding up when there was overflow.
If that’s not the case then you will need ot match the pseudo element to the body background like this.
:root {
--color-a: teal;
--color-b: black;
--color-c: orange;
--color-d: black;
}
html,body {margin:0;padding:0;}
html{height:100%;}
body{min-height:100%;}
body {
background-size: 165px 165px;
background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(
90deg,
var(--color-b) 10px,
#0000 10px 160px,
var(--color-b) 160px
),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(
90deg,
var(--color-c) 15px,
#0000 15px 155px,
var(--color-c) 155px
),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(
90deg,
var(--color-d) 20px,
#0000 20px 150px,
var(--color-d) 150px
),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(
90deg,
var(--color-a) 25px,
#0000 25px 145px,
var(--color-a) 145px
),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(
90deg,
var(--color-b) 30px,
#0000 30px 140px,
var(--color-b) 140px
),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(
90deg,
var(--color-c) 35px,
#0000 35px 135px,
var(--color-c) 135px
),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(
90deg,
var(--color-d) 40px,
#0000 40px 130px,
var(--color-d) 130px
),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(
90deg,
var(--color-a) 45px,
#0000 45px 125px,
var(--color-a) 125px
),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(
90deg,
var(--color-b) 50px,
#0000 50px 120px,
var(--color-b) 120px
),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(
90deg,
var(--color-c) 55px,
#0000 55px 115px,
var(--color-c) 115px
),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(
90deg,
var(--color-d) 60px,
#0000 60px 110px,
var(--color-d) 110px
),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(
90deg,
var(--color-a) 65px,
#0000 65px 105px,
var(--color-a) 105px
),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(
90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px
),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(
90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px
),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(
90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px
),
linear-gradient(var(--color-a), var(--color-a));
background-size: 165px 165px;
position:relative;
}
body:before {
content: "";
position: absolute;
/*background-size: 15px 13px;*/
background-repeat: repeat;
background-image: repeating-radial-gradient(
0.00085px 0.00085px,
rgba(20, 5, 25, 1),
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.6) 29%
);
left: 0;
right:0;
top: 0;
bottom:0;
}
However I think you will find that when content makes the page scroll the redraw will be a bit laggy with all that’s going on in there and the fixed background may be better.
You also need to test at wider screens as the black circle was appearing so try increasing the 9% as I have done in that example above.
Just play around with it until you find something that suits your purpose.
Back tomorrow now.