A propriedade CSS background é um atalho para definir os valores de fundo individuais em um único lugar na folha de estilo. Background pode ser usado para definir os valores para um ou mais dos seguintes: background-clipbackground-colorbackground-image (en-US)background-originbackground-position , background-repeat (en-US)background-size e background-attachment.

fundo CSS propriedade estenográfica atribui valores dados explícitos e conjuntos de propriedades para seus valores iniciais em falta.

  1. background-color: Define a cor de fundo do elemento.

elemento {
  background-color: #RRGGBB; /* Substitua RR, GG e BB pelas cores desejadas em hexadecimal. */
}

  1. background-image: Define uma imagem como plano de fundo do elemento.

elemento {
  background-image: url('caminho/para/imagem.jpg');
}

  1. background-repeat: Controla a repetição da imagem de plano de fundo.

elemento {
  background-repeat: repeat; /* Valores possíveis: repeat, repeat-x, repeat-y, no-repeat */
}

  1. background-position: Define a posição inicial da imagem de plano de fundo.

elemento {
  background-position: center top; /* Valores possíveis: top, bottom, left, right, center, coordenadas personalizadas */
}

  1. background-size: Controla o tamanho da imagem de plano de fundo.

elemento {
  background-size: cover; /* Valores possíveis: auto, cover, contain, largura altura */
}

  1. background-attachment: Define se a imagem de plano de fundo rola com o elemento ou fica fixa.

elemento {
  background-attachment: fixed; /* Valores possíveis: scroll, fixed */
}

  1. background-origin: Especifica a área de origem para calcular a posição da imagem de fundo.

elemento {
  background-origin: content-box; /* Valores possíveis: padding-box, border-box, content-box */
}

  1. background-clip: Define a área de recorte do plano de fundo.

elemento {
  background-clip: padding-box; /* Valores possíveis: border-box, padding-box, content-box */
}

  1. background-blend-mode: Define o modo de mistura (blend mode) entre o plano de fundo e o conteúdo do elemento.

elemento {
  background-blend-mode: multiply; /* Valores possíveis: normal, multiply, screen, overlay, darken, lighten, etc. */
}