Propriedade background
A propriedade background é utilizada para definir o plano de fundo de um elemento HTML. Essa propriedade oferece diversas opções de estilização, permitindo adicionar cores, imagens, gradientes e até mesmo efeitos para melhorar o visual de um elemento.
Exemplos
Cor de fundo simples
.div-colorida {
background: lightblue; /* Fundo em tom de azul claro */
}
.paragrafo-destaque {
background: #ffeecc; /* Fundo em amarelo-claro */
}Imagem de fundo
.header {
background: url('caminho-da-imagem.jpg') center/cover; /* Imagem de fundo centrada e cobrindo todo o elemento */
}
.secao {
background: url('fundo-textura.png') repeat; /* Textura repetida como fundo */
}Gradiente linear
.botao-gradient {
background: linear-gradient(to right, #ff8c00, #ffd700); /* Gradiente linear de laranja para amarelo */
}
.container-gradient {
background: linear-gradient(45deg, #ff3399, #66ff66); /* Gradiente em diagonal de rosa para verde claro */
}