Múltiplos fundos CSS

Nesta seção, você aprenderá como adicionar várias imagens de fundo a um elemento.

Você também aprenderá os seguintes atributos:

  • background-size
  • background-origin
  • background-clip

Múltiplos fundos CSS

O CSS permite que você background-image O atributo adiciona várias imagens de fundo a um elemento.

Imagens de fundo diferentes são separadas por vírgula e se empilham umas sobre as outras, com a primeira imagem mais próxima do observador.

O exemplo a seguir possui duas imagens de fundo, a primeira imagem é a flor (alinhada com o fundo e a direita), a segunda imagem é o fundo de papel (alinhado com o canto superior esquerdo):

Exemplo

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Experimente você mesmo

Imagens de fundo múltiplas podem ser usadas com o atributo de fundo separado (como mencionado anteriormente) ou background Atributo abreviado para especificar.

O exemplo a seguir utiliza: background Atributo abreviado (resultado idêntico ao exemplo anterior):

Exemplo

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Experimente você mesmo

Tamanho de Fundo de CSS

CSS background-size A propriedade permite que você especifique o tamanho da imagem de fundo.

O tamanho da imagem de fundo pode ser especificado usando comprimento, porcentagem ou uma das duas palavras-chave a seguir:contain ou cover.

O exemplo a seguir ajusta o tamanho da imagem de fundo para ser muito menor do que a imagem original (usando pixels):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Este é o código:

Exemplo

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Experimente você mesmo

background-size Outras duas possíveis valores são contain e cover.

contain Palavras-chave ajustam a imagem de fundo ao tamanho o mais grande possível (mas seus tamanhos de largura e altura devem se adequar à área de conteúdo). Dependendo da proporção da imagem de fundo e da área de posicionamento de fundo, pode haver algumas áreas de fundo não cobertas pela imagem de fundo.

cover Palavras-chave ajustam a imagem de fundo para que a área de conteúdo seja completamente coberta pela imagem de fundo (seus tamanhos de largura e altura são iguais ou maiores que a área de conteúdo). Desse modo, algumas partes da imagem de fundo podem não ser visíveis na área de posicionamento de fundo.

A seguir, apresentamos: contain e cover Uso:

Exemplo

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Experimente você mesmo

Definir o tamanho de várias imagens de fundo

Ao lidar com múltiplos fundos de cena:background-size A propriedade também pode aceitar várias configurações de tamanho de fundo (usando uma lista separada por vírgulas).

O exemplo a seguir especifica três imagens de fundo, cada uma com um valor diferente de background-size:

Exemplo

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Experimente você mesmo

Imagem de fundo em tamanho completo

Agora, queremos que a imagem de fundo da página cubra toda a janela do navegador.

Os requisitos específicos são os seguintes:

  • Preenche toda a página com a imagem (sem espaços em branco)
  • Ajusta o tamanho da imagem conforme necessário
  • Centraliza a imagem na página
  • Não gera barra de rolagem

A seguir, mostramos como implementá-lo: usando o elemento <html> (o elemento <html> é sempre pelo menos a altura da janela do navegador). Em seguida, defina o fundo como fixo e centralizado. Finalmente, ajuste o tamanho usando a propriedade background-size:

Exemplo

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Experimente você mesmo

Hero Image

Você também pode usar diferentes atributos de fundo no <div> para criar uma Hero Image (grande imagem com texto) e colocá-la na posição desejada.

Exemplo

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Experimente você mesmo

Propriedade background-origin CSS

CSS background-origin A propriedade especifica a posição da imagem de fundo.

Esta propriedade aceita três valores diferentes:

  • border-box - A imagem de fundo começa no canto superior esquerdo da borda
  • padding-box - A imagem de fundo começa no canto superior esquerdo da margem interna (padrão)
  • content-box - A imagem de fundo começa no canto superior esquerdo do conteúdo

A seguir, apresentamos: background-origin Atributos:

Exemplo

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Experimente você mesmo

Propriedade background-clip CSS

CSS background-clip A propriedade especifica a área de desenho do fundo.

Esta propriedade aceita três valores diferentes:

  • border-box - Desenhar o fundo até a margem externa da borda (padrão)
  • padding-box - Desenhar o fundo até a margem externa do preenchimento
  • content-box - Desenhar o fundo no content-box

A seguir, apresentamos: background-clip Atributos:

Exemplo

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Experimente você mesmo

Propriedades avançadas de background CSS

Propriedade Descrição
background Propriedade abreviada usada para definir todas as propriedades de fundo em uma declaração.
background-clip Especificar a área de desenho do fundo.
background-image Especificar uma ou mais imagens de fundo para um elemento.
background-origin Especificar a posição de colocação da imagem de fundo.
background-size Especificar o tamanho da imagem de fundo.