Repetição de fundo - CSS-Tricks

Anonim

Se uma background-imagepropriedade for especificada, a background-repeatpropriedade em CSS define se (e como) ela se repetirá. Aqui está um exemplo:

html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )

Estes são os valores possíveis para esta propriedade (além dos itens usuais como inherit):

  • repeat: lado a lado a imagem em ambas as direções. Este é o valor padrão.
  • repeat-x: lado a lado a imagem horizontalmente
  • repeat-y: lado a lado a imagem verticalmente
  • no-repeat: não coloque lado a lado, apenas mostre a imagem uma vez
  • space: lado a lado a imagem em ambas as direções. Nunca corte a imagem, a menos que uma única imagem seja muito grande para caber. Se várias imagens puderem caber, distancie-as de maneira evidente, sempre tocando as bordas.
  • round: lado a lado a imagem em ambas as direções. Nunca corte a imagem, a menos que uma única imagem seja muito grande para caber. Se várias imagens puderem caber com espaço restante, amasse-as ou estique-as para preencher o espaço. Se sobrar menos da metade da largura da imagem, estique, se for mais, estique.

Também existe a sintaxe de dois valores:

.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )

O que torna as sintaxes de valor único apenas uma abreviação para a sintaxe de dois valores. Por exemplo, roundé realmente round round.

Você também pode separar vários valores por vírgula se estiver lidando com vários fundos.

Demo

Veja o Pen
background-repeat por CSS-Tricks (@ css-tricks)
no CodePen.

Demonstração interativa sobre como spacee roundtrabalhar, em comparação com repeat:

Veja o Pen
The Different `background-repeat`s de Chris Coyier (@chriscoyier)
no CodePen.

Outra demonstração de redimensionamento, mostrando uma borda “falsa”:

Veja a
imagem da borda ajustada com caneta da maneira mais fácil por ShopTalk Show (@shoptalkshow)
no CodePen.

Aqui está outra demonstração divertida com demonstração de hambúrgueres background-repeat: round;.

Relacionado

  • anexo de fundo
  • clipe de fundo
  • cor de fundo
  • imagem de fundo
  • origem do fundo
  • posição de fundo
  • tamanho do fundo

Recursos

  • CSS3 Spec
  • MDN

Suporte para navegador

cromada Safári Raposa de fogo Ópera IE Android iOS
1+ 1+ 1+ 3,5+ 4+ 1+ 1+

A sintaxe de valores múltiplos separados por vírgula é compatível apenas com Firefox 3.6+ e IE 9+. A sintaxe de dois valores para controlar valores horizontais e verticais separados é compatível apenas com Firefox 13+ e IE 9+. As palavras round- spacechave e são apenas Firefox 49+ e IE 9+.