Skip to main content
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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

inserir a descrição da imagem aqui

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

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

inserir a descrição da imagem aqui

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

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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

inserir a descrição da imagem aqui