Tableless

Busca Menu

CSS3 — Trabalhando com Múltiplas imagens background-images

Seja o primeiro a comentar por

Quem nunca se deparou com um layout com múltiplas imagens “sobrepostas” ou mesmo com títulos ou parágrafos que precisavam ficar suspensos sobre múltiplas imagens de fundo? Essa semana me deparei com o mesmo problema.

Com CSS3, você pode aplicar aos elementos múltiplas imagens sobrepostas como plano de fundo. Sem a utilização do Z-index! É isso mesmo, “necas de pitibiriba” de Z-index.

Velho dilema de sobrepor imagens com div’s com Z-index…

A primeira solução que vem à cabeça é o velho e bom “Z-index”, Veja um exemplo de implementação:

HTML

<div>
    <span class="red">Red</span>
</div>
<div>
    <span class="green">Green</span>
</div>
<div>
    <span class="blue">Blue</span>
</div>

CSS

.red, .green, .blue {
    color: #fff;
    display: block;
    line-height: 100px;
    position: absolute;
    text-align: center;
    width: 100px;
}
.red {
    background: red;
    left: 20px;
    top: 20px;
    z-index: 0;
    opacity:0.5;
}
.green {
    background: green;
    left: 60px;
    top: 60px;
    z-index: 1;
    opacity:0.6;
}
.blue {
    background: blue;
    left: 100px;
    top: 100px;
    z-index: 2;
    opacity:0.7;
}
body {
    color: #777;
}

See the Pen Z-index by Moisés lopes ferreira (@selique) on CodePen.

Funciona?!… SIM! Mas espere um momento, essa não é a única solução…

… Você já tava pensando num “workaround” safadinho, a mão da gambiarra chega a tremer nessas horas, mas nada de programação orientada a “Go-Horse”, hoje em dia temos “solucionática” pra quase tudo hehe…

www.gohorseprocess.com.br/extreme-go-horse-(xgh)

www.gohorseprocess.com.br/extreme-go-horse-(xgh)

Conhecendo as propriedades CSS do Background:

background-color.........define a cor do fundo;
background-image.........define uma imagem de fundo;
background-repeat........define a maneira como a imagem de fundo é posicionada;
background-attachment....define se a imagem de fundo "rola" ou não com a tela;
background-position......define como e onde a imagem de fundo é posicionada;
background-clip..........define a área do box onde a imagem de fundo é aplicada;
background-origin........define a posição de origem da imagem no box;
background-size..........define as dimensões da imagem no box;
background...............maneira abreviada para declarar todas as propriedades anteriores;

O nosso grande mestre Maurício Samy Silva #Maujor explica melhor as aplicações das propriedades http://maujor.com/tutorial/propriedade-css-para-estilizacao-de-background.php

Agora que conhecemos suas propriedades e características… agora vamos ver como o “background-image” funciona para entendermos nosso horizonte de possibilidades:

Background-image VS Z-index — A BATALHA:

Quando trabalhamos 2 ou 3 elementos (sejam <img>, <div>, <etc…>) temos um controle até tolerável, mas… quando utilizamos 6, 10 ou mais elementos numa mesma div ou aninhamento próximo, o z-index começa a se tornar “linguiçento” demais e somos obrigados a utilizar mais classes e ids para organizarmos nosso CSS, pensando nisso que escrevi esse post!

Às vezes não necessariamente queremos ou podemos utilizar o z-index.

Sem contar que quebramos o conceito de DRY em nosso documento CSS e não queremos isso, não é amiguinhos?

Vida de um Front-end

Front-end Lifestyle

Z-index — Quando usar?

Quando temos muitos elementos e precisamos especificar propriedades e características CSS que vão além do propósito de uma “imagem de fundo” ou “sobreposição” então o Z-index é a melhor opção!

Mas se você quer simplesmente sobrepor uma imagem de um logo (ou uma composição de camadas que formam um logo) sobre um uma ou mais imagem de preenchimento de fundo o background-image é a melhor solução!

Estes elementos ficam empilhados em camadas uma acima da outra, onde o primeiro fundo dado será desenhado no topo e apenas o último elemento da lista poderá definir uma cor sólida de fundo, ou não, aí fica ao seu critério.

.minhaClasse {
  background: fundo1, fundo2, ..., fundoN;
}

CSS3 permite especificar imagens de fundo para múltiplos elementos, usando nada mais do que uma única lista separada por vírgulas.

Você pode fazer isso com a propriedade reduzida background e também com as propriedade individuais, com a exceção de background-color. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size. (rola até gradiente!)

Exemplos

Neste exemplo, três planos de fundos estão empilhados: um texto estilizado, o logo da Tableless.com.br, e uma imagem de fundo ilustrando uma cidade:

HTML

<header>
  <div class="intro-text">
    <h1 class="name-index">BEM-VINDO À</br><span>INTERNET</span></h1>
  </div>
</header>

CSS

header {
  background: url(http://tableless.com.br/wp-content/uploads/2013/04/logo-tableless-01.png) no-repeat center center, url(http://lorempixel.com/output/city-q-g-1024-768-10.jpg) no-repeat center top;
  height: 100vh;
  width: auto;
  box-sizing: border-box;
}
header .intro-text {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .intro-text > h1 {
  text-shadow: 8px 5px 5px #00181c;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
header .intro-text .name-index {
  font-size: 7vw;
}
header .intro-text .name-index span {
  font-size: 9.2vw;
}

See the Pen Multiple backgrounds backgroud-image by Moisés lopes ferreira (@selique) on CodePen.

Suporte do navegador para múltiplas imagens com a propriedade CSS background-image é relativamente difundido na implementação do recurso citado acima:

  • Mozilla Firefox (3.6 ou superior)
  • Safari / Chrome (1.0 / 1.3 +)
  • Opera (10.5+)
  • até mesmo no Internet Explorer (9.0+)

Bibliografia (Fontes)

Publicado no dia