how to make a pattern background with CSS?

Question

how to make a pattern background with CSS?

Navigation

#1 by (1 votes)

3

I was looking at the bootstrap templates and this template caught my attention because your background is done with the technique pattern , that is, it has only one image that repeats "perfectly" throughout the background. How can I do a bg like this?

html html5 css

asked by anonymous 21.06.2018 / 19:24

1 answer

Merging function calculating wrongly How to call function in JS only once

score 1 · Accepted Answer

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

In the example here is just an image that repeats 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 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 that you cited as a reference, and by the way 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: Link to the image of the site that you cited as an example: link