Estilização utilizando a propriedade : background-repeat

O background-repeat veio para determinar se a imagem de fundo que colocarmos no nosso código e em seguida avistarmos no nosso browser , será repetida ou não para cobrir uma área de preenchimento de um elemento de fundo que estaremos usando. Esse preenchimento repetido pode ser de utilizado na forma horizontal ou vertical .

Para quem já está familiarizado com as propriedades round e space no border-image-repeat ,agora o CSS3 adicionou essas duas propriedades já conhecidas para o background-repeat ( que já possui várias outras propriedades),como veremos logo abaixo..

Vamos lá…

…para você , programador(a), adicionar a propriedade background-repeat em seu código,antes o mesmo terá que possuir um background-image.

Com uma imagem já escolhida por você ,poderemos agora adicionar a propriedade background-repeat que será capaz de ter diferentes alternativas de repetição.

E ai?Animado(a) para ver como essa propriedade se apresenta? Abra seu compilador favorito and let’s go!!

O HTML será escrito dessa forma :

Agora com o código do CSS em mãos ,iremos implementar as características da propriedade background-repeat na imagem escolhida. Entre as suas propriedades estarão : no-repeat, repeat,repeat-x,repeat-y ,space e round. Falaremos de cada uma delas a seguir, preste bastante atenção ;)

NO-REPEAT

Ao utilizarmos o no-repeat , que traduzindo para o português quer dizer “não repitir” , estamos com o intuito de fazer com que a imagem não se repita dentro do body, ou seja, do corpo.

Podemos ver o exemplo da adição dessa propriedade logo abaixo, onde a imagem com o uso do no-repeat, será mostrada apenas uma vez dentro do body.

Utilizando a propriedade “no-repeat”.

REPEAT

Quando utilizamos a propriedade repeat, estamos dizendo para o compilador repetir a imagem que adicionamos. O código utilizado no CSS segue abaixo:

Podemos observar na figura abaixo que a imagem se repetiu tanto verticalmente como horizontalmente até preencher o tamanho total da tela,mas com alguns cortes. “Como poderemos deixar sem esse corte?” Veremos em seguida..

(Uma explosão de fofura com os pugs! :D) Mas isso não vem ao caso,haha.
Utilizando a propriedade “repeat”.
U A U ! :O

REPEAT-X

Com o uso dessa propriedade , estamos fazendo com que a imagem adicionada se repita apenas no sentido horizontal, ou seja, no eixo x.

Logo abaixo vemos o exemplo da aplicação dessa propriedade :

Utilizando a propriedade “repeat-x”
Não é o M Á X I M O? :D

REPEAT-Y

Utilizando a propriedade repeat-y a imagem ao invés de seguir o sentido horizontal como na anterior, agora seguirá o eixo y, ou seja, agora a imagem se encontrará na posição vertical,sendo que cortada nesse sentido.

Utilizando a propriedade “repeat-y”

SPACE

Nessa propriedade, como próprio nome já diz “space” , que significa “espaço”, a imagem se repetirá com espaços,mas sem cortes.

De acordo com a imagem a seguir , podemos observar que a figura não está sendo cortada no limite do elemento(como dito anteriormente) ,tanto na posição horizontal (que é o caso logo abaixo) quanto na vertical ( se nós desejássemos pôr ). Esse espaço será calculado uniformemente tanto na largura como na altura a fim de garantir que a imagem não seja cortada.

Utilizando a propriedade “space”

ROUND

Nessa propriedade, a imagem será repetida com a frequência que caberá dentro da área de posicionamento de fundo. Se não caber um número inteiro de vezes, ele vai ser redimensionado na direção que é especificada.

Podemos notar na imagem abaixo que não há espaço entre as imagens como na ilustração anterior e que a aproximação da imagem é maior, tendo em vista que a imagem se repete ao longo da largura.

Utilizando a propriedade “round”

BROWSERS QUE SUPORTAM A PROPRIEDADE

Fonte: https://www.w3schools.com/cssref/pr_background-repeat.asp

O seu browser se encaixa em um desses?! #partiu #background-repeat !

CONCLUSÃO

E ai galera, podemos observar aqui a grande necessidade que um background-repeat possui em nossas vidas como desenvolvedores(as) não é mesmo?! Dar aquele aspecto diferenciado e bonito com imagens para uma página é maneiro demais , fora que podemos perceber uma renderização das imagens grandes e que elas vão possuir tamanho fixo durante o uso. Lembre-se sempre de atentar que “imagens grandes demais ocupam bastante espaço na memória” e poderão fazer com que o seu computador fique mais lento para carregá-las, portanto, observe a qualidade das imagens que você for postar .

Bom , é isso aí pessoal. Gostaram do tema abordado no blog?Quer dar alguma dica? ! Deixe seu comentário logo abaixo, ficarei muito feliz em recebê-lo !

Y E A H!!