Cara isso é com background-size
se precisar e background-repeat
.
No exemplo aqui é apenas uma imagem que se repete na horizontal e vertical ocupando toda a página, mas na realidade a imagem tem 100px X 100px com size de 50px, o tamanho do BG é opcional e vc usa se quiser controlar o tamanho do pattern.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url(https://www.lokoloko.es/16144-small_default/geometric-pattern-pack-234-pieces.jpg), linear-gradient(red, blue);
background-repeat: repeat;
background-size: 50px;
}
Essa é a imagem original que usaram no site que vc citou como referência, e por traz eu fiz um linear-gradiente
para dar a cor do fundo
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url(https://blackrockdigital.github.io/startbootstrap-new-age/img/bg-pattern.png), linear-gradient(to left, purple, tomato);
background-repeat: repeat;
}
OBS: Link da imagem do site que vc citou como exemplo: https://blackrockdigital.github.io/startbootstrap-new-age/img/bg-pattern.png