Propriedades background-repeat e background-position

Na lição anterior, você aprendeu a usar a background-image para colocar uma imagem no fundo de um elemento. Mas uma imagem de fundo raramente se comporta exatamente como você quer logo de cara. É aí que entram as propriedades background-repeat e background-position.

Elas são como as instruções que você dá para um pintor de paredes: "Cole este papel de parede uma vez no centro da parede" ou "Repita este padrão por toda a parede".

background-repeat: Controlando a Repetição

A propriedade background-repeat define se e como a imagem de fundo será repetida para preencher o espaço do elemento.

Sintaxe:

seletor {
  background-repeat: valor;
}

Valores possíveis:

• repeat (padrão): A imagem se repete tanto horizontalmente quanto verticalmente para cobrir todo o elemento.
  • Uso: Ideal para padrões pequenos e texturas que se encaixam perfeitamente.
• no-repeat: A imagem aparece apenas uma vez no fundo do elemento.
  • Uso: Perfeito para logotipos, ícones ou imagens grandes que não devem ser duplicadas.
• repeat-x: A imagem se repete apenas horizontalmente (ao longo do eixo X).
  • Uso: Bom para criar bordas horizontais ou padrões que se estendem lateralmente.
• repeat-y: A imagem se repete apenas verticalmente (ao longo do eixo Y).
  • Uso: Bom para criar bordas verticais ou padrões que se estendem para cima e para baixo.
• space: A imagem se repete o máximo de vezes possível sem cortar, e o espaço restante é distribuído uniformemente entre as imagens.
• round: A imagem se repete o máximo de vezes possível, e se não couber um número inteiro de repetições, as imagens são redimensionadas para que caibam.

background-position: Definindo a Posição

A propriedade background-position define a posição inicial da imagem de fundo dentro do elemento. Se a imagem não se repetir (no-repeat), esta propriedade é crucial para posicioná-la onde você deseja.

Sintaxe:

seletor {
  background-position: valor-horizontal valor-vertical;
}

Valores possíveis:

Você pode usar palavras-chave, porcentagens ou unidades de comprimento (pixels, em, rem, etc.).

• Palavras-chave:
  • Horizontal: left, center, right
  • Vertical: top, center, bottom
  • Exemplos: top left, center center, bottom right, center top.
    • Se apenas um valor for fornecido, o segundo é assumido como center. Ex: background-position: top; é o mesmo que top center.
• Porcentagens:
  • 0% 0% é o mesmo que top left.
  • 50% 50% é o mesmo que center center.
  • 100% 100% é o mesmo que bottom right.
  • Como funciona: A porcentagem se refere tanto à posição da imagem quanto à posição do elemento. 50% 50% significa que o ponto central da imagem é alinhado com o ponto central do elemento.
• Unidades de Comprimento (px, em, rem, etc.):
  • 0px 0px é o mesmo que top left.
  • 10px 20px posiciona a imagem 10px da esquerda e 20px do topo.

Exemplos Combinados:

Considere o seguinte HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Background Repeat e Position</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
    }
    .box {
      width: 300px;
      height: 200px;
      border: 2px solid #333;
      margin: 20px;
      display: inline-block;
      vertical-align: top;
      background-color: #f0f0f0; /* Cor de fallback */
    }
  </style>
</head>
<body>
  <div class="box box-repeat">
    <h3>Repeat (Padrão)</h3>
  </div>
  <div class="box box-no-repeat">
    <h3>No-Repeat</h3>
  </div>
  <div class="box box-repeat-x">
    <h3>Repeat-X</h3>
  </div>
  <div class="box box-repeat-y">
    <h3>Repeat-Y</h3>
  </div>
  <div class="box box-position-center">
    <h3>Position Center</h3>
  </div>
  <div class="box box-position-bottom-right">
    <h3>Position Bottom Right</h3>
  </div>
  <div class="box box-position-pixels">
    <h3>Position 20px 30px</h3>
  </div>
</body>
</html>

Agora, vamos aplicar os estilos:

/* Imagem de exemplo (um pequeno ícone) */
.box {
  background-image: url("https://via.placeholder.com/50x50/ff0000/fff?text=ICON");
}

.box-repeat {
  background-repeat: repeat; /* Padrão, mas explícito */
}

.box-no-repeat {
  background-repeat: no-repeat;
  background-position: center center; /* Centraliza a imagem única */
}

.box-repeat-x {
  background-repeat: repeat-x;
  background-position: center top; /* Repete horizontalmente no topo */
}

.box-repeat-y {
  background-repeat: repeat-y;
  background-position: left center; /* Repete verticalmente à esquerda */
}

.box-position-center {
  background-repeat: no-repeat;
  background-position: center; /* O mesmo que center center */
}

.box-position-bottom-right {
  background-repeat: no-repeat;
  background-position: bottom right;
}

.box-position-pixels {
  background-repeat: no-repeat;
  background-position: 20px 30px; /* 20px da esquerda, 30px do topo */
}

Resultado: Cada caixa terá a imagem de ícone vermelha, mas se comportando de forma diferente em termos de repetição e posição.

Propriedade Abreviada (background)

Lembre-se que você pode combinar background-image, background-repeat e background-position (e outras propriedades de fundo) na propriedade abreviada background.

Exemplo:

.box-no-repeat {
  background: url("https://via.placeholder.com/50x50/ff0000/fff?text=ICON") no-repeat center center;
}

Dominar background-repeat e background-position é essencial para ter controle total sobre a aparência das suas imagens de fundo, permitindo que você crie layouts precisos e visualmente atraentes.