3

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 1

1

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

4
  • 1
    isso mesmo! muito obrigada amigo!
    – SHRIMP
    Commented 21/06/2018 às 18:44
  • @hunterxhunter Sem problemas tmj! O legal da técnica é que vc consegue com uma imagem pequena e leve cobrir a tela inteira!
    – hugocsl
    Commented 21/06/2018 às 18:44
  • Com certeza! Só mais uma coisa, tem como colocar 3 cores nesse gradiente?
    – SHRIMP
    Commented 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
    – hugocsl
    Commented 21/06/2018 às 18:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .