CSS background-image: configurando a imagem de fundo de um elemento!

O CSS background-image faz parte do conjunto de propriedades utilizadas na linguagem de estilo para definir o background, ou seja, a parte do fundo de um elemento – que, nesse caso, corresponde a aplicação de uma ou mais imagens para modificar a sua aparência.

Outra aplicação muito utilizada aplicações web e que pode ser criada com o CSS background-image são os gradientes, efeito que faz uma transição gradual entre as cores. Por isso, preparamos este conteúdo para demonstrar como utilizar esse recurso. Acompanhe os tópicos:

  • O que é a propriedade background-image?
  • Qual é a sintaxe?
  • Quais são os valores da propriedade background-image?
  • Exemplo de uso do background-image

Continue conosco e boa leitura!

O que é a propriedade background-image?

A propriedade background-image é aplicada a todos os elementos HTML, ou seja, todos eles podem adicionar uma imagem de fundo para modificar sua aparência. Entretanto, o padrão é que não exista nenhuma associação definida. Portanto, seu valor inicial é definido como none. É possível aplicar como imagem de fundo boa parte dos formatos utilizados, por exemplo: JPG, PNG, SVG, GIF etc.

Vale ressaltar que, ao aplicar uma imagem como background, é importante utilizar uma propriedade auxiliar, como a background-color, para substituir a imagem caso ocorra alguma falha em seu carregamento. Isso é indicado para evitar, por exemplo, problemas de contrastes entre a cor de fundo e a cor da fonte, caso seja um elemento que contenha texto.

Qual é a sintaxe?

A sintaxe da propriedade background-image é:

background-image: uri | none | inherit

No qual:

  • uri: corresponde ao endereço da imagem, que pode ser uma pasta no site ou uma URL com o endereço correspondente;
  • none: indica que não existe nenhuma imagem associada;
  • inherit: herda o valor do background-image do elemento pai.

Quais são os valores da propriedade background-image?

A propriedade background-image pode assumir diferentes valores, confira cada um deles abaixo.

Definindo a URL da imagem: url(‘URL’)

Ao utilizar uma imagem como background, é preciso indicar o seu endereço ao navegador para que ela seja carregada. Isso pode ser feito com a indicação do endereço relativo ou absoluto da imagem.

Endereço relativo:

background-image: url(/imagens/background.png);

Endereço absoluto:

background-image: url(http://endereco-da-imagem.com.br/imagem.png);

Por padrão, a imagem de background é posicionada no canto superior esquerdo do espaço definido para o elemento e se repete até que tudo seja preenchido. Para que a imagem ocupe um determinado espaço, fique centralizada ou se repita apenas em um sentido, por exemplo, é preciso utilizar as propriedades auxiliares, são elas:

Background-repeat

Essa propriedade pode receber os seguintes valores para a repetição da imagem de fundo:

  • repeat: repete a imagem na vertical e horizontal até o preenchimento da área do elemento;
  • repeat-x: repete a imagem apenas no sentido horizontal;
  • repeat-y: repete a imagem apenas no sentido vertical;
  • no-repeat: a imagem é inserida apenas uma vez no plano de fundo.

Background-position

A propriedade background-position indica a posição em que a imagem de fundo será inserida. Os valores possíveis são:

  • left top: à esquerda superior;
  • left center: à esquerda e ao centro;
  • left bottom: à esquerda inferior;
  • right top: à direita superior;
  • right center: à direita e ao centro;
  • right bottom: à direita inferior;
  • center top: ao centro superior;
  • center center: ao centro;
  • center bottom: ao centro inferior;
  • x% y%: porcentagem horizontal e porcentagem vertical;
  • x-pos y-pos: valores fixos para as posições horizontal e vertical.

Background-size

A propriedade background-size indica o tamanho que a imagem de fundo deverá ter, ou seja, corresponde à CSS background-image size. É possível definir um valor fixo ou em percentual ou utilizar os seguintes valores:

  • auto: a imagem é redimensionada para ser exibida na área disponível, mesmo que ela fique distorcida;
  • cover: a imagem é redimensionada para encaixar na área disponível, entretanto, ela não será distorcida. Se a área não for proporcional ao aumento ou redução da imagem, a parte excedente não será exibida;
  • contain: a imagem é redimensionada para encaixar no espaço disponível.

Definindo elementos sem plano de fundo: none

Conforme mencionamos, o valor padrão para todos os elementos HTML é o none, ou seja, nenhuma imagem é atribuída como background.

background-image: none;

Definindo um gradiente linear como plano de fundo: linear-gradient()

Em vez de inserir uma imagem como background, podemos utilizar a função linear-gradient() para adicionar o efeito da variação das cores. Uma das formas de aplicar a função é informar o ângulo, que será utilizado para definir o sentido da linha, e ao menos duas cores. A primeira cor é utilizada na parte superior do elemento, enquanto a segunda é definida para a parte inferior.

background-image: linear-gradient(<ângulo>, [<cor-1> <tamanho>], [<cor-2> <tamanho>]);

No qual o valor de ângulo corresponde à direção em que a linha gradiente terá o efeito aplicado. O padrão é 180deg, que indica o sentido horizontal.

Definindo um gradiente radial como plano de fundo: radial-gradient()

Outra função que também pode ser aplicada como imagem de fundo é a radial-gradient(), que adiciona o efeito degradê entre duas ou mais cores, a partir de um ponto de origem e com o formato circular ou elíptico. Uma das formas de utilizar a função é:

background-image: radial-gradient([<circle> ou <ellipse>], [<cor1> <tamanho>], [<cor2> <tamanho>]);

Vale ressaltar que, se não for declarado o tamanho, que indica a proporção de cada cor para compor o efeito, a função radial-gradient() faz o cálculo de forma proporcional entre a quantidade de cores utilizadas para realização do gradiente.

Repete o gradiente linear: repeating-linear-gradient()

A função repeating-linear-gradient() cria um efeito semelhante ao linear-gradient(), porém, várias vezes dentro do espaço disponível e de acordo com as dimensões definas para a repetição. Uma das sintaxes para essa função é:

background-image: repeating-linear-gradient([ângulo], [<cor1> <tamanho>], [<cor2> <tamanho>]);

No qual:

  • ângulo: representa a inclinação em que o efeito será apresentado;
  • cor1, cor2: indicam as cores utilizadas;
  • tamanho: representa o espaço destinado para cada cor, que pode ser definido em pixels ou em porcentagem.

Repete o gradiente radial: repeating-radial-gradient()

A função repeating-radial-gradient() também repete o efeito de acordo com as indicações. Uma das sintaxes para essa função é:

background-image: repeating-radial-gradient([<circle> ou <elipse> <tamanho>], [<cor1> <tamanho>], [<cor2> <tamanho>]);

Redefinindo a propriedade para o valor padrão: initial 

Como mencionamos, o valor padrão para a propriedade background-image é none, o que indica que não há nenhuma imagem atribuída ao elemento. Para definir essa condição ao elemento, basta declarar seu valor como initial.

background-image: initial;

Herdando a propriedade de seu elemento pai: inherit

Para compartilhar a imagem de background do elemento pai, basta atribuir o valor inherit à propriedade.

background-image: inherit;

Exemplo de uso do background-image

Nada melhor que exemplos práticos para visualizar os efeitos e entender como a propriedade background-image funciona. No código de exemplo abaixo demonstramos a utilização de uma imagem como background. Perceba como ela se repete até que preencha o espaço disponível.

Já no segundo exemplo, utilizamos a propriedade background-size com o valor definido para cover. Veja como a imagem preencheu o espaço disponível de forma uniforme. No elemento seguinte utilizamos a propriedade com o valor definido como contain para demonstrar a diferença entre eles.

Fizemos também a aplicação das funções linear-gradient() e radial-gradient() e, por fim, criamos um efeito com as funções repeating-linear-gradient() e repeating-radial-gradient().

<img back01.png>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS - background-image</title>
    <style>
        .box{
            width:300px;
            height: 400px;
            border: 2px solid green;
            margin:10px;
            color: #fff;
        }
        .imagem{
            background-image: url(imagens/back01.png);
            background-color:#fff;
            color: #000;
        }
        .imagemCover{
            background-image: url(imagens/back01.png);
            background-color:#fff;
            background-size: cover;
            color: #000;
        }
        .imagemContain{
            background-image: url(imagens/back01.png);
            background-repeat: no-repeat;
            background-color:#fff;
            background-size: contain;
            color: #000;
        }
        .linearGradientVertical{
            background-image: linear-gradient(90deg, green, red);
        }
        .linearGradientHorizontal{
            background-image: linear-gradient(180deg, green, red);
        }
        .radialGradient{
            background-image: radial-gradient(green, red);
        }
        .repeatingLinearGradient{
            background-image: repeating-linear-gradient(45deg,green, black 15%, rgb(155, 228, 155) 20%);
        }
        .repeatingRadialGradient{
            background: repeating-radial-gradient(circle, green, black 30px,darkgray 10px, green 40px);
        }     
    </style>
</head>
<body>
    <div class="box imagem">
        <p class="paragrafo">
           Elemento com imagem de background que se repete até completar a área disponível.
        </p>
    </div>
    <div class="box imagemCover">
        <p class="paragrafo">
            Elemento com background-size igual a cover.
        </p>
    </div>
    <div class="box imagemContain">
        <p class="paragrafo">
            Elemento com background-size igual a contain.
        </p>
    </div>
    <div class="box linearGradientVertical">
        <p class="paragrafo">
            Gradiente linear vertical.
        </p>
    </div>
    <div class="box linearGradientHorizontal">
        <p class="paragrafo">
            Gradiente linear horizontal.
        </p>
    </div>
    <div class="box radialGradient">
        <p class="paragrafo">
            Gradiente radial.
        </p>
    </div>
    <div class="box repeatingLinearGradient">
        <p class="paragrafo">
            Repeating Linear Gradient.
        </p>
    </div>  
    <div class="box repeatingRadialGradient">
        <p class="paragrafo">
            Repeating Radial Gradient.
        </p>
    </div>      
</body>
</html>

A propriedade CSS background-image é utilizada para inserir uma ou mais imagens ao fundo do elemento. Além disso, podem ser aplicadas diferentes funções CSS que criam efeitos com cores variadas, como a liner-gradient() e a radial-gradient(). Também existem propriedades auxiliares para que a imagem fique exatamente como desejamos, como a background-position, a background-repeat e a background-size.

Gostou do nosso conteúdo sobre CSS background-image? Então, confira nosso tutorial completo sobre HTML, com tudo o que você precisa saber sobre o assunto!