how to make a background Pattern with CSS?

Question

I was looking at the bootstrap templates and this template caught my attention because its background is done with the technique Pattern, ie it has only an image that repeats itself "perfectly" throughout background. How can I make a bg like this?

Answer 1

Face this is with background-size if needed and background-repeat.

In the example here is just an image that repeats itself horizontally and vertically occupying the entire page, but in reality the image has 100px X 100px with size of 50px, the size of the BG is optional and you use if you want to control the size of the 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; 
}

This is the original image that they used on the website that you quoted as reference, and behind it I made a linear-gradiente to give the background color

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: Image link of the website you mentioned as an example: https://blackrockdigital.github.io/startbootstrap-new-age/img/bg-pattern.png