Help With Repeating Linear Gradients (Making Horizontal Stripes)

HTML-CSS
1

Hello, I would appreciate some help on this.

I am try to make a background with a square grid. I’m using two repeating linear gradients to make the stripes (one for the vertical and one for the horizontal). The vertical stripes one works fine, but the spacing of the horizontal stripes one changes depending on what HTML elements I add. I have no idea why that would happen! My thought is that I should not style Body to create a background. But what else should I style? I want the grid to be the background for the entire page.

Here is my code: https://codepen.io/stressstressstress/pen/ZEzwLEx

2

It is changing the height of the body element. If you remove all the content you can see the grid collapse to just a yellow color.

Try adding background-attachment: fixed; or give the html/body a height (100% or 100vh).

1 Like