Background-repeat, como utilizar.

Olá galera, no post anterior falamos sobre Background-image, como aplicar e chamar ele através do CSS para seu documento HTML.

Nesse post vamos continuar falando de Background, mas do atributo repeat, para que serve, como utilizar.

Background-repeat: define a maneira como a imagem de fundo é posicionada.


No post anterior aplicamos esse exemplo que chama o background, dentro da div #teste:

#teste{
    width: 400px;
    height: 300px;
    background-image: url(imagem.png);
}

Como vimos a largura está em 400px e a altura em 300px, mas se a nossa imagem estiver com 200px de altura e 150px de altura?

Como padrão a imagem se repete para cobrir os espaço que foi definido no seu CSS, mas se a gente quer manter a div maior que o background e não queremos q a imagem se repita, faremos assim:
background-image: url(imagem.png) no-repeat;

Independente o tamanho da sua div, o background-image não irá se repetir vai ser apresentado nas dimensões padrão da imagem.

Se eu quizer que a imagem só se repita na vertical? Faremos:
background-image: url(imagem.png) repeat-y;

Se eu quizer somente na horizontal? Faremos:
background-image: url(imagem.png) repeat-x;

Entenderam Galera, como utilizar esse atributo do CSS, isso é muito util para quem coloca um fundo para as páginas, ou tipo um sombreamento para dar um efeito legal nas suas páginas. 

Espero que tenham gostado, até o próximo post.