Repetição de fundo

3.1 Propriedade background-repeat

As propriedades background-repeat e background-size no CSS são usadas para controlar como as imagens de fundo são repetidas e escaladas dentro dos elementos. Essas propriedades oferecem aos desenvolvedores web ferramentas flexíveis para criar fundos visualmente atraentes. Vamos ver cada uma delas com mais detalhes.

A propriedade background-repeat define como as imagens de fundo são repetidas em um elemento. Por padrão, a imagem de fundo é repetida tanto horizontalmente quanto verticalmente.

Valores

• repeat: a imagem é repetida horizontalmente e verticalmente (padrão)
• repeat-x: a imagem é repetida apenas horizontalmente
• repeat-y: a imagem é repetida apenas verticalmente
• no-repeat: a imagem não é repetida

1. Valor repeat:

Repete a imagem horizontalmente e verticalmente.

    
      .repeat {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat">Repetição horizontal e vertical</div>
    
  

2. Valor repeat-x:

Repete a imagem horizontalmente.

    
      .repeat-x {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat-x;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat-x">Repetição apenas horizontal</div>
    
  

3. Valor repeat-y:

Repete a imagem verticalmente.

    
      .repeat-y {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat-y;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat-y">Repetição apenas vertical</div>
    
  

4. Valor no-repeat:

A imagem não é repetida.

    
      .no-repeat {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: no-repeat;
        border: 1px solid #000;
      }
    
  

    
      <div class="no-repeat">Sem repetição</div>
    
  

Explicação do código

• .repeat: a imagem é repetida horizontal e verticalmente, preenchendo todo o elemento
• .repeat-x: a imagem é repetida apenas horizontalmente
• .repeat-y: a imagem é repetida apenas verticalmente
• .no-repeat: a imagem não é repetida e aparece apenas uma vez

3.2 Propriedade background-size

A propriedade background-size controla o tamanho da imagem de fundo. Ela permite modificar o tamanho da imagem para que ela se encaixe melhor no elemento.

Valores:

• auto: o tamanho da imagem é determinado automaticamente (padrão)
• cover: a imagem é escalada para cobrir completamente o elemento, mantendo as proporções
• contain: a imagem é escalada para caber completamente dentro do elemento, mantendo as proporções
• Valores absolutos: por exemplo, 100px 50px definem a largura e altura da imagem em pixels
• Valores percentuais: por exemplo, 50% 50% definem a largura e altura da imagem como uma porcentagem do tamanho do elemento

1. Tamanho padrão (auto):

O tamanho da imagem é determinado automaticamente (padrão).

    
      .size-auto {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-size: auto;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-auto">Tamanho padrão (auto)</div>
    
  

2. cover:

A imagem é escalada para cobrir completamente o elemento, mantendo as proporções.

    
      .size-cover {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: cover;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-cover">Escalamento para cobrir o elemento (cover)</div>
    
  

3. contain:

A imagem é escalada para caber completamente no elemento, mantendo as proporções.

    
      .size-contain {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: contain;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-contain">Escalamento para caber completamente (contain)</div>
    
  

4. Valores absolutos:

Por exemplo, 100px 50px definem a largura e altura da imagem em pixels.

    
      .size-pixels {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: 100px 50px;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-pixels">Tamanho em pixels (100px 50px)</div>
    
  

5. Valores percentuais:

Por exemplo, 50% 50% definem a largura e altura da imagem como porcentagem do tamanho do elemento.

    
      .size-percent {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: 50% 50%;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-percent">Tamanho em porcentagem (50% 50%)</div>
    
  

Explicação do código:

• .size-auto: o tamanho da imagem é determinado automaticamente
• .size-cover: a imagem é escalada para cobrir completamente o elemento, mantendo as proporções. Partes da imagem podem ser cortadas
• .size-contain: a imagem é escalada para caber completamente no elemento, mantendo as proporções. A imagem ficará totalmente visível, mas podem surgir áreas vazias
• .size-pixels: o tamanho da imagem é definido em pixels (100px de largura e 50px de altura)
• .size-percent: o tamanho da imagem é definido como porcentagem do tamanho do elemento (50% de largura e 50% de altura)

3.3 Uso conjunto de background-repeat e background-size

As propriedades background-repeat e background-size são frequentemente usadas juntas para alcançar o efeito desejado na exibição de imagens de fundo.

Exemplo de uso:

    
      .combined {
        width: 300px;
        height: 300px;
        background-image: url('https://via.placeholder.com/150');
        background-repeat: no-repeat;
        background-size: cover;
        border: 1px solid #000;
      }
    
  

    
      <body>
        <div class="combined">Imagem de fundo não se repete e é escalada para cobrir o elemento</div>
      </body>
    
  

Explicação do código:

• background-repeat: no-repeat;: a imagem não é repetida
• background-size: cover;: a imagem é escalada para cobrir completamente o elemento, mantendo as proporções. Partes da imagem podem ser cortadas