logo

Como adicionar imagem de fundo em CSS?

O imagem de fundo propriedade em CSS é usada para definir uma imagem como plano de fundo de um elemento. Usando esta propriedade CSS, podemos definir uma ou mais imagens de fundo para um elemento.

Por padrão, a imagem é posicionada no canto superior esquerdo de um elemento e repetida tanto horizontal quanto verticalmente. A imagem de fundo deve ser escolhida de acordo com a cor do texto. A má combinação de texto e imagem de fundo pode ser a causa de uma página da web mal projetada e ilegível.

O url() O valor desta propriedade nos permite incluir um caminho de arquivo para qualquer imagem. Ele mostrará o plano de fundo do elemento. Podemos usar múltiplas imagens ou uma mistura de gradientes e imagens de fundo. Se a imagem de fundo não for carregada ou se estivermos usando os gradientes, mas eles não forem suportados no navegador correspondente, podemos usar o valor substituto (o valor usado como substituição) como a cor de fundo do elemento.

expressão regular em java

Sintaxe

 background-image: url(); 

Valores

url(): É o URL da imagem. Podemos separar os URLs por vírgula se quisermos especificar mais de uma imagem.

desinstalar angular cli

Exemplo

 body { background-image: url('cat.webp'); background-color: lightgray; } 
Teste agora

Saída

Como adicionar imagem de fundo em CSS

Exemplo

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 
Teste agora

Saída

Como adicionar imagem de fundo em CSS

Exemplo

 body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url('lion.webp'); } 
Teste agora

Saída

Como adicionar imagem de fundo em CSS