Estava olhando os templates do bootstrap e esse template me chamou atenção pois o seu background é feito com a técnica pattern, ou seja ele possui apenas uma imagem que se repete "perfeitamente" por todo background. Como posso fazer um bg assim?
1 Resposta
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
-
1
-
@hunterxhunter Sem problemas tmj! O legal da técnica é que vc consegue com uma imagem pequena e leve cobrir a tela inteira!– hugocslCommented 21/06/2018 às 18:44
-
Com certeza! Só mais uma coisa, tem como colocar 3 cores nesse gradiente?– SHRIMPCommented 21/06/2018 às 18:48
-
1@hunterxhunter tem sim meu caro, basta colocar uma cor a mais na lista
linear-gradient(to left, red, blue, green)
depois da uma olhada nesse link w3schools.com/css/css3_gradients.asp– hugocslCommented 21/06/2018 às 18:49