Ao trabalhar com imagens de fundo em CSS, você tem várias propriedades à sua disposição para controlar como essas imagens são exibidas. As principais propriedades em que vamos focar são background-size, background-repeat, background-position e background-attachment. Vamos primeiro dar uma olhada na propriedade background-image:

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
  }
</style>

O CSS acima define uma imagem de fundo de gato para o elemento body. Se você quiser definir o tamanho da imagem de fundo, pode usar a propriedade background-size. Você pode usar contain para dimensionar a imagem o máximo possível sem cortar ou esticar. Aqui está um exemplo com background-size: contain:

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: contain;
    min-height: 100px;
  }
</style>

Estamos definindo o min-height para 100px para que a imagem de fundo seja visível e o layout mantenha uma altura base, garantindo que mesmo com conteúdo mínimo, o design pareça equilibrado e visualmente atraente. Se alterarmos a propriedade background-size para usar o valor cover, então a imagem de fundo será redimensionada para cobrir todo o elemento body mantendo sua proporção.

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: cover;
    min-height: 100px;
  }
</style>

Nos exemplos anteriores, você provavelmente percebeu que a imagem de fundo se repetia continuamente. Por padrão, as imagens de fundo se repetem tanto horizontalmente e verticalmente para preencher todo o elemento. No entanto, você pode controlar esse comportamento. Você pode usar a propriedade background-repeat com o valor definido como no-repeat.

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 100px;
  }
</style>

Com o background-size definido como contain e o background-repeat definido como no-repeat, a imagem não se repetirá mais na tela. Se você quiser repetir a imagem de fundo horizontalmente, pode usar o valor repeat-x para a propriedade background-repeat.

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: contain;
    background-repeat: repeat-x;
    min-height: 100px;
  }
</style>

Se você quiser repetir a imagem de fundo verticalmente, pode usar o valor repeat-y para a propriedade background-repeat.

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: contain;
    background-repeat: repeat-y;
    min-height: 100px;
  }
</style>

Para posicionar uma imagem de fundo na tela, você pode usar a propriedade background-position. A propriedade background-position permite que você defina onde no elemento a imagem de fundo aparece. Você pode usar palavras-chave como top, bottom, left, right e center ou valores específicos em pixels ou porcentagem. Aqui está um exemplo usando o center e o top para o background-position:

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 100px;
  }
</style>

Este código CSS posiciona a imagem de fundo no centro do elemento horizontalmente e no topo verticalmente. Por fim, background-attachment determina se a imagem de fundo rola com o conteúdo ou permanece fixa quando a página é rolada. Os valores principais são scroll (padrão), onde a imagem de fundo rola com o conteúdo e fixed, onde a imagem de fundo permanece na mesma posição na tela. Aqui está um exemplo usando o valor fixed para a propriedade background-attachment:

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-position: center top;
    background-attachment: fixed;
  }
</style>

Este código CSS define que a imagem de fundo permaneça fixa no lugar mesmo quando a página for rolada. Se você quiser combinar algumas das propriedades em uma linha, pode fazer isso usando a propriedade abreviada background. Aqui está um exemplo:

<style>
  body {
    background: center top fixed
      url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
  }
</style>

O exemplo acima combina o background-image, background-position e background-attachment em uma única linha. Ao dominar essas propriedades, você terá grande controle sobre como as imagens de fundo são exibidas em seus designs web, permitindo layouts mais visualmente atraentes e funcionais.