Aplicar Estilos de Fundo em CSS

Introdução

Neste laboratório, você aprenderá a aplicar estilos de fundo avançados usando CSS, com foco em aprimorar o design de páginas web através da manipulação de cores e imagens. O laboratório abrange técnicas essenciais como definir cores de fundo para elementos HTML, adicionar e dimensionar imagens de fundo, controlar o posicionamento e a repetição de imagens, e combinar múltiplas propriedades de fundo para criar layouts web visualmente atraentes.

Através de exemplos práticos e "hands-on", você explorará diferentes métodos de especificação de cores de fundo usando nomes de cores, códigos hexadecimais e funções RGB, além de aprender a incorporar imagens de fundo com técnicas precisas de dimensionamento e posicionamento. Ao final deste laboratório, você terá adquirido habilidades práticas no uso de propriedades de fundo CSS para criar designs de páginas web mais dinâmicos e envolventes.

Definir Cor de Fundo para Elementos HTML

Nesta etapa, você aprenderá a definir cores de fundo para elementos HTML usando CSS. As cores de fundo são uma forma fundamental de aprimorar o design visual de páginas web, adicionando cor a diferentes elementos.

Primeiro, vamos criar um arquivo HTML para demonstrar a estilização de cores de fundo. Abra o WebIDE e crie um novo arquivo chamado styles.html no diretório ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemplo de Cor de Fundo</title>
    <style>
      /* Adicionaremos nosso CSS aqui */
    </style>
  </head>
  <body>
    <div class="box1">Primeira Caixa</div>
    <div class="box2">Segunda Caixa</div>
    <p class="paragraph">Este é um parágrafo com cor de fundo.</p>
  </body>
</html>

Agora, vamos adicionar algum CSS para definir cores de fundo para diferentes elementos. Atualize a seção <style> no arquivo HTML:

.box1 {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 10px;
}

.box2 {
  background-color: #ff5733;
  color: white;
  padding: 20px;
  margin: 10px;
}

.paragraph {
  background-color: rgb(200, 230, 255);
  padding: 15px;
}

Neste exemplo, demonstramos três maneiras de especificar cores de fundo:

Cor nomeada (blue)
Código de cor hexadecimal (#FF5733)
Função de cor RGB (rgb(200, 230, 255))

Salve o arquivo e abra-o em um navegador web para ver as diferentes cores de fundo aplicadas aos elementos.

Adicionar Imagem de Fundo com Dimensionamento

Nesta etapa, você aprenderá a adicionar imagens de fundo a elementos HTML e a controlar seu dimensionamento usando CSS. Continuaremos a partir do exemplo anterior, modificando o arquivo styles.html no diretório ~/project.

A imagem de exemplo está no diretório ~/project.

Agora, atualize o arquivo styles.html com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Dimensionamento de Imagem de Fundo</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
      }

      .cover-background {
        background-image: url("background-sample.jpg");
        background-size: cover;
      }

      .contain-background {
        background-image: url("background-sample.jpg");
        background-size: contain;
      }

      .custom-size-background {
        background-image: url("background-sample.jpg");
        background-size: 200px 150px;
      }
    </style>
  </head>
  <body>
    <div class="image-container cover-background">
      Cover: Preenche todo o contêiner
    </div>
    <div class="image-container contain-background">
      Contain: Ajusta a imagem inteira
    </div>
    <div class="image-container custom-size-background">
      Tamanho Personalizado: 200x150 pixels
    </div>
  </body>
</html>

Este exemplo demonstra três maneiras diferentes de dimensionar imagens de fundo:

background-size: cover; - Redimensiona a imagem para cobrir todo o contêiner
background-size: contain; - Redimensiona a imagem para caber inteiramente dentro do contêiner
background-size: 200px 150px; - Define um tamanho específico em pixels para a imagem de fundo

Ao abrir este arquivo HTML em um navegador, você verá três técnicas diferentes de dimensionamento de imagem de fundo.

Posicionar Imagem de Fundo

Nesta etapa, você aprenderá a controlar o posicionamento de imagens de fundo usando CSS. Continuaremos modificando o arquivo styles.html no diretório ~/project para demonstrar diferentes técnicas de posicionamento de fundo.

Atualize o arquivo styles.html com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Posicionamento de Imagem de Fundo</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .top-left {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: top left;
      }

      .center {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: center;
      }

      .bottom-right {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: bottom right;
      }

      .custom-position {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: 20% 80%;
      }
    </style>
  </head>
  <body>
    <div class="image-container top-left">Posição Superior Esquerda</div>
    <div class="image-container center">Posição Centralizada</div>
    <div class="image-container bottom-right">Posição Inferior Direita</div>
    <div class="image-container custom-position">
      Posição Personalizada (20% 80%)
    </div>
  </body>
</html>

Este exemplo demonstra quatro maneiras diferentes de posicionar imagens de fundo:

background-position: top left; - Posiciona a imagem no canto superior esquerdo
background-position: center; - Centraliza a imagem dentro do contêiner
background-position: bottom right; - Posiciona a imagem no canto inferior direito
background-position: 20% 80%; - Usa valores percentuais para posicionamento personalizado

Ao abrir este arquivo HTML em um navegador, você verá como diferentes valores de posicionamento afetam a colocação da imagem de fundo.

Controlar Repetição da Imagem de Fundo

Nesta etapa, você aprenderá a controlar a repetição de imagens de fundo usando a propriedade CSS background-repeat. Continuaremos modificando o arquivo styles.html no diretório ~/project para demonstrar diferentes técnicas de repetição.

Atualize o arquivo styles.html com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Repetição de Imagem de Fundo</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .repeat {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat;
      }

      .repeat-x {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-x;
      }

      .repeat-y {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-y;
      }

      .no-repeat {
        background-image: url("background-sample.jpg");
        background-size: 200px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container repeat">Repetir (Padrão)</div>
    <div class="image-container repeat-x">Repetir X (Horizontal)</div>
    <div class="image-container repeat-y">Repetir Y (Vertical)</div>
    <div class="image-container no-repeat">Não Repetir</div>
  </body>
</html>

Este exemplo demonstra quatro técnicas diferentes de repetição de imagem de fundo:

background-repeat: repeat; - Repete a imagem tanto horizontal quanto verticalmente (padrão)
background-repeat: repeat-x; - Repete a imagem apenas horizontalmente
background-repeat: repeat-y; - Repete a imagem apenas verticalmente
background-repeat: no-repeat; - Impede que a imagem se repita

Ao abrir este arquivo HTML em um navegador, você verá como diferentes valores de repetição afetam a exibição da imagem de fundo.

Combinar Múltiplas Propriedades de Fundo

Nesta etapa, você aprenderá a combinar múltiplas propriedades de fundo para criar designs de fundo mais complexos e interessantes. Modificaremos o arquivo styles.html no diretório ~/project para demonstrar técnicas avançadas de estilização de fundo.

Atualize o arquivo styles.html com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Múltiplas Propriedades de Fundo</title>
    <style>
      .image-container {
        width: 600px;
        height: 400px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
        padding: 20px;
      }

      .multiple-backgrounds {
        background-image:
          linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
          url("background-sample.jpg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      .layered-backgrounds {
        background-image:
          url("small-pattern.jpg"), linear-gradient(to right, #ff6b6b, #4ecdc4);
        background-size:
          100px 100px,
          cover;
        background-position:
          top left,
          center;
        background-repeat: repeat, no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container multiple-backgrounds">
      Overlay de Fundo com Imagem
    </div>
    <div class="image-container layered-backgrounds">
      Fundo em Camadas com Padrão e Gradiente
    </div>
  </body>
</html>

small-pattern.jpg está no diretório ~/project.

Este exemplo demonstra duas técnicas avançadas de fundo:

Múltiplos Fundos com Overlay:
- Usa um gradiente linear para criar um overlay semitransparente
- Combina o gradiente com uma imagem de fundo
- Aplica dimensionamento, posicionamento e repetição consistentes
Fundos em Camadas:
- Combina uma imagem de padrão repetido com um gradiente linear
- Usa dimensionamento e posicionamento diferentes para cada camada de fundo

Ao abrir este arquivo HTML em um navegador, você verá como múltiplas propriedades de fundo podem criar designs complexos e visualmente interessantes.

Resumo

Neste laboratório, os participantes aprenderam a aplicar estilos de fundo em CSS através de uma abordagem abrangente e passo a passo. O laboratório cobriu técnicas essenciais para aprimorar o design de páginas web, incluindo a definição de cores de fundo usando diferentes métodos como cores nomeadas, códigos hexadecimais e funções RGB, e a exploração da manipulação de imagens de fundo.

Os exercícios práticos demonstraram como adicionar imagens de fundo a elementos HTML, controlar seu dimensionamento, posicionamento e repetição, e combinar múltiplas propriedades de fundo. Ao trabalhar com exemplos práticos, os alunos adquiriram habilidades práticas no uso de CSS para criar fundos de página web visualmente atraentes e dinâmicos com várias técnicas de estilização.