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-clip, background-color, background-image (en-US), background-origin, background-position , background-repeat (en-US), background-size e background-attachment.
O fundo CSS propriedade estenográfica atribui valores dados explícitos e conjuntos de propriedades para seus valores iniciais em falta.
background-color: Define a cor de fundo do elemento.
elemento {
background-color: #RRGGBB; /* Substitua RR, GG e BB pelas cores desejadas em hexadecimal. */
}
background-image: Define uma imagem como plano de fundo do elemento.
elemento {
background-image: url('caminho/para/imagem.jpg');
}
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 */
}
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 */
}
background-size: Controla o tamanho da imagem de plano de fundo.
elemento {
background-size: cover; /* Valores possíveis: auto, cover, contain, largura altura */
}
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 */
}
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 */
}
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 */
}
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. */
}