How to create a grooved background like this image in css?

Image :

I tried a lot but I couldn't get what I want

body {
    background-color: #000;
    background-position: 0 0,131px 10px;
    background-image: repeating-linear-gradient(45deg,white -199px, transparent -176px);
    background-size: 101% 22247%;
}

CodePudding user response：

You can change the width by manipulating pixels.

body {
  height: 100vh;
  background: repeating-linear-gradient(
    45deg,
    #FFFFFF 0px,
    #FFFFFF 20px,
    #000000 20px,
    #000000 30px
  );
}

CodePudding user response：

Try this:

body {
    background-color: #000;
    background-position: 0 0,131px 10px;
    background-image: repeating-linear-gradient(45deg,white 0px, white 10px, black 10px, black 15px);
    background-size: 101% 22247%;
}

It simply means each 15px we should have white color (10px) and black color (5px) in a row.

But you can change the numbers depending on the width you want.