html – 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 made with the pattern technique, that is, it has only one image that repeats itself "perfectly" throughout the background. How can I make a bg like this?

Answer:

Dude this is with background-size if you need and background-repeat .

In the example here it's just an image that repeats itself horizontally and vertically occupying the entire page, but in reality the image is 100px X 100px with a size of 50px, the BG size is optional and you use it 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 they used on the site you cited as a reference, and behind it I did 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;
}

NOTE: Link to the image of the site that you cited as an example: https://blackrockdigital.github.io/startbootstrap-new-age/img/bg-pattern.png

Scroll to Top
AllEscort