Backgrounds no CSS

Tempo de leitura: 3 minutos

Backgrounds no CSS: O CSS oferece uma variedade de propriedades para personalizar a aparência dos elementos HTML, e uma das mais importantes é a propriedade background. Com ela, podemos definir cores, imagens, repetições e outras características para o fundo de qualquer elemento, desde o corpo da página até elementos individuais.

Neste artigo, vamos explorar as diversas possibilidades da propriedade background e como utilizá-la para criar designs mais ricos e personalizados.

A Propriedade background

A propriedade background é uma abreviação que permite definir múltiplas propriedades de fundo em uma única declaração. Ela engloba as seguintes propriedades individuais:

• background-color: Define a cor de fundo do elemento.
• background-image: Define a imagem de fundo.
• background-repeat: Define como a imagem de fundo se repete.
• background-attachment: Define se a imagem de fundo se move ao rolar a página.
• background-position: Define a posição da imagem de fundo.
• background-size: Define o tamanho da imagem de fundo.
• background-clip: Define a área onde a imagem de fundo é aplicada.  
• background-origin: Define a posição de origem da imagem de fundo.  

Exemplo de uso:

CSS

.section {
  background: url('imagem.jpg') no-repeat center center fixed;
  background-size: cover;
}

Neste exemplo, a seção terá como fundo a imagem ‘imagem.jpg’, que não se repetirá e estará posicionada no centro, tanto horizontalmente quanto verticalmente. A imagem será redimensionada para cobrir toda a área da seção.

Explorando as Propriedades Individuais

background-color:

CSS

div { background-color: #f0f0f0; }

background-image:

CSS

.card { background-image: url('card-pattern.png'); }

background-repeat:

• no-repeat: A imagem não se repete.
• repeat: A imagem se repete tanto horizontalmente quanto verticalmente.
• repeat-x: A imagem se repete horizontalmente.
• repeat-y: A imagem se repete verticalmente.

background-attachment:

• scroll: A imagem rola junto com o conteúdo.
• fixed: A imagem permanece fixa enquanto o conteúdo rola.

background-position:

• top, center, bottom (para vertical)
• left, center, right (para horizontal)
• Valores numéricos (em pixels, porcentagem, etc.)

background-size:

• cover: A imagem escala para cobrir toda a área.
• contain: A imagem escala para caber dentro da área, mantendo as proporções.

background-clip:

• border-box: A imagem é cortada pela borda.
• padding-box: A imagem é cortada pelo padding.
• content-box: A imagem é cortada pelo conteúdo.

background-origin:

• padding-box: A posição da imagem é relativa ao padding.
• border-box: A posição da imagem é relativa à borda.
• content-box: A posição da imagem é relativa ao conteúdo.

Criando Efeitos Interessantes com Fundo

Gradientes:

CSS

div { background: linear-gradient(to right, #f0f0f0, #333); }

Múltiplas imagens:

CSS

.section {
    background-image: url('image1.jpg'), url('image2.png');
    background-position: left top, right bottom;
    background-repeat: no-repeat;
}

Fundo fixo e rolagem paralax:

CSS

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Background Shorthand:

Para simplificar a escrita, você pode combinar todas as propriedades de fundo em uma única declaração utilizando a propriedade background.

CSS

.section {
  background: #f0f0f0 url('fundo.jpg') no-repeat center center/cover;
}

Considerações Importantes

• Performance: Evite usar muitas imagens de fundo grandes, pois isso pode afetar o desempenho da página.
• Compatibilidade: Verifique a compatibilidade das propriedades de fundo em diferentes navegadores.
• Acessibilidade: Certifique-se de que as cores de fundo e as imagens utilizadas tenham contraste suficiente para garantir a acessibilidade.

Conclusão

Backgrounds no CSS: A propriedade background é uma ferramenta poderosa para criar designs visuais atraentes e personalizados. Ao dominar as diversas propriedades e combinações possíveis, você poderá criar efeitos visuais incríveis e transformar seus projetos web.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: