Page background in the form of diagonal lines

For the site page, there is a background image in the form of diagonal lines. I asked her background-repeat, but then the connection is noticeable. With such a background, it is probably impossible to make a small pattern, and then repeat it? Maybe on CSS it would be better to do it, if this is possible?

enter a description of the image here

Author: Alexandr_TT, 2018-02-15
Source

4 answers

Disable the background image and make repeating-linear-gradient

  body {
    background: repeating-linear-gradient(-45deg,#222,red 10px, gold 10px) fixed;
   }
 6
Author: , 2018-02-15 22:52:25

You can do this with linear-gradient()

body {
  background: linear-gradient(45deg,rgba(0, 0, 0, 1) 47%,rgba(111, 255, 255, 1) 50%,rgba(0, 0, 0, 1) 0%);
  background-size: 0.9rem 0.9rem;
}
 7
Author: Arthur, 2018-02-15 21:58:27

Very aggressive background in the question. But as they say, for every taste, - their own markers. There is a very useful online resource for background formation - https://www.transparenttextures.com/ You can choose almost any background, with any color. And in the future, use the CSS rules to adjust the preferred color shades. Your color option is background-color: #c52230;
In principle, the interface is intuitive, but just in case, a brief sequence of actions:

  • Select the appropriate background pattern and click - createWallpaper
  • Next, choose the color

enter a description of the image here

  • Choose the desired background size, it is better to take a large one, so that there are no stitches

enter a description of the image here

  • And take the CSS code

enter a description of the image here 

   div {
width:1920px;
height:1080px;
background-color: #c52230;
background-image: url("http://www.transparenttextures.com/patterns/black-mamba.png");
}
<div></div>

Multiple backgrounds for example

Pixel background

<style>
div {
width:1920px;
height:1080px;
background-color: #ffffff;
background-image: url("https://www.transparenttextures.com/patterns/3px-tile.png");
}
</style> 

<div></div>

Diagonal gray (if you want red, replace it with background-color: #c52230; 

<style>
div {
width:1920px;
height:1080px;
background-color: #d5d5d5;
background-image: url(http://www.transparenttextures.com/patterns/black-twill.png);
}
</style> 

<div></div>

Fiber Background 

<style>
div {
width:1920px;
height:1080px;
background-color: #ededed;
background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre-big.png");
}
</style> 

<div></div>
 6
Author: Alexandr_TT, 2018-02-16 13:27:11

You can use svg

<div>
</div>

<style>
  body {
    margin: 0;
    padding: 0;
  }
  div {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }
  div:before{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: url('line.svg') repeat center; // сама картинка https://drive.google.com/file/d/1DofB76Dmrwjy58coBb2g9SN_w5IlFwjB/view
    background-color: red;
    transform: rotate(-45deg)
  }
</style>
 -1
Author: DemoGosha, 2018-02-15 22:20:16