Posicionamento do fundo

2.1 Propriedade background-position

A propriedade background-position no CSS é usada para definir a posição inicial de uma imagem de fundo em um elemento. Essa propriedade permite especificar exatamente onde a imagem de fundo será posicionada dentro do elemento. background-position pode ser usada para ajustar finamente a exibição de imagens de fundo e criar designs mais complexos.

Sintaxe de background-position

A propriedade background-position aceita dois valores que indicam as posições horizontal e vertical da imagem de fundo:

    
      background-position: posição-horizontal posição-vertical;
    
  

Se apenas um valor for especificado, o segundo valor é considerado center por padrão.

Quais podem ser os valores de posição horizontal e vertical:

• Palavras-chave:
  • left: alinhamento à esquerda
  • center: centralização
  • right: alinhamento à direita
  • top: alinhamento ao topo
  • bottom: alinhamento ao fundo
• Valores percentuais:
  • Por exemplo, 50% 50% posiciona a imagem no centro
  • Os valores percentuais são relativos ao tamanho do elemento, não da imagem
• Valores em pixels:
  • Por exemplo, 10px 20px posiciona a imagem a 10 pixels da borda esquerda e 20 pixels do topo
• Combinações de valores:
  • É possível combinar palavras-chave e valores percentuais, por exemplo, left 50%

2.2 Palavras-chave

Palavras-chave:

• left, center, right: alinhamento horizontal
• top, center, bottom: alinhamento vertical

Exemplos de uso de palavras-chave

A imagem é posicionada no canto superior esquerdo:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left top;  /* A imagem é posicionada no canto superior esquerdo */
      }
    
  

A imagem é posicionada no centro:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: center center;  /* A imagem é posicionada no centro */
      }
    
  

A imagem é posicionada no canto inferior direito:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: right bottom;  /* A imagem é posicionada no canto inferior direito */
      }
    
  

2.3 Porcentagens

Os valores em porcentagem indicam a posição da imagem em relação ao tamanho do elemento.

Exemplos de uso de porcentagens

A imagem é posicionada no centro:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 50% 50%;  /* A imagem é posicionada no centro */
      }
    
  

A imagem é posicionada no canto superior esquerdo:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 0% 0%;  /* A imagem é posicionada no canto superior esquerdo */
      }
    
  

A imagem é posicionada no canto inferior direito:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 100% 100%;  /* A imagem é posicionada no canto inferior direito */
      }
    
  

2.4 Unidades absolutas (px, em, rem)

Os valores em pixels ou outras unidades absolutas permitem posicionar a imagem com precisão.

A imagem é posicionada no centro:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 10px 20px;  /* A imagem é posicionada a 10 pixels à direita e 20 pixels abaixo do canto superior esquerdo */
      }

      div {
        background-image: url('path/to/image.jpg');
        background-position: 2em 3em;  /* A imagem é posicionada a 2em à direita e 3em abaixo */
      }
    
  

2.5 Combinando valores

Você pode combinar palavras-chave e unidades absolutas para criar um posicionamento mais preciso.

Combinando valores:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left 20px top 10px;  /* A imagem é posicionada a 20 pixels à direita e 10 pixels abaixo do canto superior esquerdo */
      }
    
  

1

Tarefa

Frontend SELF PT, nível 18, lição 2

Bloqueado

Posição do fundo

Posição do fundo

Abrir

1

Tarefa

Frontend SELF PT, nível 18, lição 2

Bloqueado

Posição do fundo (pixels)

Posição do fundo (pixels)

Abrir