<http://schema.org/articleBody>
"&lt;p class=\"graf--p\"&gt;Quem nunca se deparou com um layout com m\u00FAltiplas imagens \u201Csobrepostas\u201D ou mesmo com t\u00EDtulos ou par\u00E1grafos que precisavam ficar suspensos sobre m\u00FAltiplas imagens de fundo? Essa semana me deparei com o mesmo problema.&lt;/p&gt;\n\n&lt;p class=\"graf--p\"&gt;Com &lt;a class=\"markup--anchor markup--p-anchor\" title=\"CSS3\" href=\"https://developer.mozilla.org/en/CSS/CSS3\"&gt;CSS3&lt;/a&gt;, voc\u00EA pode aplicar aos elementos m\u00FAltiplas imagens sobrepostas como plano de fundo. Sem a utiliza\u00E7\u00E3o do Z-index! \u00C9 isso mesmo, \u201Cnecas de pitibiriba\u201D de Z-index.&lt;/p&gt;\n\n&lt;h2 class=\"graf--h4\"&gt;Velho dilema de sobrepor imagens com div\u2019s com Z-index\u2026&lt;/h2&gt;\n\n&lt;p class=\"graf--p\"&gt;A primeira solu\u00E7\u00E3o que vem \u00E0 cabe\u00E7a \u00E9 o velho e bom \u201CZ-index\u201D, Veja um exemplo de implementa\u00E7\u00E3o:&lt;/p&gt;\n\n&lt;blockquote class=\"graf--blockquote\"&gt;HTML&lt;/blockquote&gt;\n\n&lt;pre class=\"lang-html\"&gt;&amp;lt;div&amp;gt;\n    &amp;lt;span class=\"red\"&amp;gt;Red&amp;lt;/span&amp;gt;\n&amp;lt;/div&amp;gt;\n&amp;lt;div&amp;gt;\n    &amp;lt;span class=\"green\"&amp;gt;Green&amp;lt;/span&amp;gt;\n&amp;lt;/div&amp;gt;\n&amp;lt;div&amp;gt;\n    &amp;lt;span class=\"blue\"&amp;gt;Blue&amp;lt;/span&amp;gt;\n&amp;lt;/div&amp;gt;&lt;/pre&gt;\n\n&lt;blockquote class=\"graf--blockquote\"&gt;CSS&lt;/blockquote&gt;\n\n&lt;pre class=\"lang-css\"&gt;.red, .green, .blue {\n    color: #fff;\n    display: block;\n    line-height: 100px;\n    position: absolute;\n    text-align: center;\n    width: 100px;\n}\n.red {\n    background: red;\n    left: 20px;\n    top: 20px;\n    z-index: 0;\n    opacity:0.5;\n}\n.green {\n    background: green;\n    left: 60px;\n    top: 60px;\n    z-index: 1;\n    opacity:0.6;\n}\n.blue {\n    background: blue;\n    left: 100px;\n    top: 100px;\n    z-index: 2;\n    opacity:0.7;\n}\nbody {\n    color: #777;\n}&lt;/pre&gt;\n\nSee the Pen &lt;a href=\"http://codepen.io/selique/pen/grvvLw/\"&gt;Z-index&lt;/a&gt; by Mois\u00E9s lopes ferreira (&lt;a href=\"http://codepen.io/selique\"&gt;@selique&lt;/a&gt;) on &lt;a href=\"http://codepen.io\"&gt;CodePen&lt;/a&gt;.\n\n&lt;h3 class=\"graf--h4\"&gt;Funciona?!\u2026 &lt;em class=\"markup--em markup--h4-em\"&gt;SIM!&lt;/em&gt; Mas espere um momento, essa n\u00E3o \u00E9 a \u00FAnica solu\u00E7\u00E3o\u2026&lt;/h3&gt;\n\n&lt;p class=\"graf--p\"&gt;\u2026 Voc\u00EA j\u00E1 tava pensando num \u201Cworkaround\u201D safadinho, a m\u00E3o da gambiarra chega a tremer nessas horas, mas nada de programa\u00E7\u00E3o orientada a \u201CGo-Horse\u201D, hoje em dia temos \u201Csolucion\u00E1tica\u201D pra quase tudo hehe\u2026&lt;/p&gt;\n\n[caption id=\"\" align=\"aligncenter\" width=\"500\"]&lt;img src=\"https://cdn-images-1.medium.com/max/800/1*pAiFtxYHdjg4-HP6e46wZA.gif\" alt=\"www.gohorseprocess.com.br/extreme-go-horse-(xgh)\" width=\"500\" height=\"374\" /&gt; www.gohorseprocess.com.br/extreme-go-horse-(xgh)[/caption]\n\n&lt;h3 class=\"graf--h4\"&gt;Conhecendo as propriedades CSS do Background:&lt;/h3&gt;\n\n&lt;pre&gt;background-color.........define a cor do fundo;\nbackground-image.........define uma imagem de fundo;\nbackground-repeat........define a maneira como a imagem de fundo \u00E9 posicionada;\nbackground-attachment....define se a imagem de fundo \"rola\" ou n\u00E3o com a tela;\nbackground-position......define como e onde a imagem de fundo \u00E9 posicionada;\nbackground-clip..........define a \u00E1rea do box onde a imagem de fundo \u00E9 aplicada;\nbackground-origin........define a posi\u00E7\u00E3o de origem da imagem no box;\nbackground-size..........define as dimens\u00F5es da imagem no box;\nbackground...............maneira abreviada para declarar todas as propriedades anteriores;&lt;/pre&gt;\n\n&lt;p class=\"graf--p\"&gt;O nosso grande mestre &lt;a class=\"markup--user markup--p-user\" href=\"https://medium.com/u/addb7196c9b9\"&gt;Maur\u00EDcio Samy Silva&lt;/a&gt; #Maujor explica melhor as aplica\u00E7\u00F5es das propriedades &lt;a class=\"markup--anchor markup--p-anchor\" href=\"http://maujor.com/tutorial/propriedade-css-para-estilizacao-de-background.php\" rel=\"nofollow\"&gt;http://maujor.com/tutorial/propriedade-css-para-estilizacao-de-background.php&lt;/a&gt;&lt;/p&gt;\n\n&lt;p class=\"graf--p\"&gt;Agora que conhecemos suas propriedades e caracter\u00EDsticas\u2026 agora vamos ver como o \u201Cbackground-image\u201D funciona para entendermos nosso horizonte de possibilidades:&lt;/p&gt;\n\n&lt;h2 class=\"graf--h4\"&gt;Background-image VS Z-index\u200A\u2014\u200AA BATALHA:&lt;/h2&gt;\n\n&lt;p class=\"graf--p\"&gt;Quando trabalhamos 2 ou 3 elementos (sejam &amp;lt;img&amp;gt;, &amp;lt;div&amp;gt;, &amp;lt;etc\u2026&amp;gt;) temos um controle at\u00E9 toler\u00E1vel, mas\u2026 quando utilizamos 6, 10 ou mais elementos numa mesma div ou aninhamento pr\u00F3ximo, o z-index come\u00E7a a se tornar \u201Clingui\u00E7ento\u201D demais e somos obrigados a utilizar mais classes e ids para organizarmos nosso CSS, pensando nisso que escrevi esse post!&lt;/p&gt;\n\n&lt;p class=\"graf--p\"&gt;&lt;em&gt;\u00C0s vezes n\u00E3o necessariamente queremos ou podemos utilizar o z-index.&lt;/em&gt;&lt;/p&gt;\n\n&lt;p class=\"graf--p\"&gt;Sem contar que quebramos o conceito de &lt;a class=\"markup--anchor markup--p-anchor\" href=\"http://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/\"&gt;DRY&lt;/a&gt; em nosso documento CSS e n\u00E3o queremos isso, n\u00E3o \u00E9 amiguinhos?&lt;/p&gt;\n\n[caption id=\"\" align=\"aligncenter\" width=\"485\"]&lt;img src=\"https://cdn-images-1.medium.com/max/800/1*xt8qqJopHwF-Gcg9xM6t3w.gif\" alt=\"Vida de um Front-end\" width=\"485\" height=\"364\" /&gt; Front-end Lifestyle[/caption]\n\n&lt;h3 class=\"graf--h4\"&gt;Z-index\u200A\u2014\u200AQuando usar?&lt;/h3&gt;\n\n&lt;p class=\"graf--p\"&gt;Quando temos muitos elementos e precisamos especificar propriedades e caracter\u00EDsticas CSS que v\u00E3o al\u00E9m do prop\u00F3sito de uma \u201Cimagem de fundo\u201D ou \u201Csobreposi\u00E7\u00E3o\u201D ent\u00E3o o Z-index \u00E9 a melhor op\u00E7\u00E3o!&lt;/p&gt;\n\n&lt;p class=\"graf--p\"&gt;Mas se voc\u00EA quer simplesmente sobrepor uma imagem de um logo (ou uma composi\u00E7\u00E3o de camadas que formam um logo) sobre um uma ou mais imagem de preenchimento de fundo o background-image \u00E9 a melhor solu\u00E7\u00E3o!&lt;/p&gt;\n\n&lt;p class=\"graf--p\"&gt;Estes elementos ficam empilhados em camadas uma acima da outra, onde o primeiro fundo dado ser\u00E1 desenhado no topo e apenas o \u00FAltimo elemento da lista poder\u00E1 definir uma cor s\u00F3lida de fundo, ou n\u00E3o, a\u00ED fica ao seu crit\u00E9rio.&lt;/p&gt;\n\n&lt;pre class=\"lang-css\"&gt;.minhaClasse {\n  background: fundo1, fundo2, ..., fundoN;\n}&lt;/pre&gt;\n\n&lt;p class=\"graf--p\"&gt;&lt;a class=\"markup--anchor markup--p-anchor\" href=\"http://tableless.com.br/tag/css3/\"&gt;CSS3&lt;/a&gt; permite especificar imagens de fundo para m\u00FAltiplos elementos, usando nada mais do que uma \u00FAnica lista separada por v\u00EDrgulas.&lt;/p&gt;\n\n&lt;p class=\"graf--p\"&gt;Voc\u00EA pode fazer isso com a propriedade reduzida &lt;a class=\"markup--anchor markup--p-anchor\" title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background\"&gt;background&lt;/a&gt; e tamb\u00E9m com as propriedade individuais, com a exce\u00E7\u00E3o de &lt;a class=\"markup--anchor markup--p-anchor\" title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-color\"&gt;background-color&lt;/a&gt;. Isto \u00E9, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: &lt;a class=\"markup--anchor markup--p-anchor\" title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background\"&gt;background&lt;/a&gt;, &lt;a class=\"markup--anchor markup--p-anchor\" title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-attachment\"&gt;background-attachment&lt;/a&gt;, &lt;a class=\"markup--anchor markup--p-anchor\" title=\"A propriedade CSS\u00A0background-clip\u00A0especifica se o fundo de um elemento, seja cor ou imagem, se extende debaixo de sua borda.\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-clip\"&gt;background-clip&lt;/a&gt;, &lt;a class=\"markup--anchor markup--p-anchor\" title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-image\"&gt;background-image&lt;/a&gt;, &lt;a class=\"markup--anchor markup--p-anchor\" title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-origin\"&gt;background-origin&lt;/a&gt;, &lt;a class=\"markup--anchor markup--p-anchor\" title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-position\"&gt;background-position&lt;/a&gt;, &lt;a class=\"markup--anchor markup--p-anchor\" title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-repeat\"&gt;background-repeat&lt;/a&gt;, &lt;a class=\"markup--anchor markup--p-anchor\" title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-size\"&gt;background-size&lt;/a&gt;. (rola at\u00E9 gradiente!)&lt;/p&gt;\n\n&lt;h2 class=\"graf--h3\"&gt;Exemplos&lt;/h2&gt;\n\n&lt;p class=\"graf--p\"&gt;Neste exemplo, tr\u00EAs planos de fundos est\u00E3o empilhados: um texto estilizado, o logo da Tableless.com.br, e uma imagem de fundo ilustrando uma cidade:&lt;/p&gt;\n\n&lt;blockquote class=\"graf--blockquote\"&gt;HTML&lt;/blockquote&gt;\n\n&lt;pre class=\"lang-html\"&gt;&amp;lt;header&amp;gt;\n  &amp;lt;div class=\"intro-text\"&amp;gt;\n    &amp;lt;h1 class=\"name-index\"&amp;gt;BEM-VINDO \u00C0&amp;lt;/br&amp;gt;&amp;lt;span&amp;gt;INTERNET&amp;lt;/span&amp;gt;&amp;lt;/h1&amp;gt;\n  &amp;lt;/div&amp;gt;\n&amp;lt;/header&amp;gt;&lt;/pre&gt;\n\n&lt;blockquote class=\"graf--blockquote\"&gt;CSS&lt;/blockquote&gt;\n\n&lt;pre class=\"lang-css\"&gt;header {\n  background: url(&lt;a class=\"markup--anchor markup--pre-anchor\" href=\"http://tableless.com.br/wp-content/uploads/2013/04/logo-tableless-01.png\" rel=\"nofollow\"&gt;http://tableless.com.br/wp-content/uploads/2013/04/logo-tableless-01.png&lt;/a&gt;) no-repeat center center, url(&lt;a class=\"markup--anchor markup--pre-anchor\" href=\"http://lorempixel.com/output/city-q-g-1024-768-10.jpg\" rel=\"nofollow\"&gt;http://lorempixel.com/output/city-q-g-1024-768-10.jpg&lt;/a&gt;) no-repeat center top;\n  height: 100vh;\n  width: auto;\n  box-sizing: border-box;\n}\nheader .intro-text {\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\nheader .intro-text &amp;gt; h1 {\n  text-shadow: 8px 5px 5px #00181c;\n  color: #fff;\n  text-transform: uppercase;\n  text-align: center;\n}\nheader .intro-text .name-index {\n  font-size: 7vw;\n}\nheader .intro-text .name-index span {\n  font-size: 9.2vw;\n}&lt;/pre&gt;\n\nSee the Pen &lt;a href=\"http://codepen.io/selique/pen/vKddRK/\"&gt;Multiple backgrounds backgroud-image&lt;/a&gt; by Mois\u00E9s lopes ferreira (&lt;a href=\"http://codepen.io/selique\"&gt;@selique&lt;/a&gt;) on &lt;a href=\"http://codepen.io\"&gt;CodePen&lt;/a&gt;.\n\n&lt;p class=\"graf--p\"&gt;Suporte do navegador para m\u00FAltiplas imagens com a propriedade CSS background-image \u00E9 relativamente difundido na implementa\u00E7\u00E3o do recurso citado acima:&lt;/p&gt;\n\n&lt;ul class=\"postList\"&gt;\n    &lt;li class=\"graf--li\"&gt;Mozilla Firefox (3.6 ou superior)&lt;/li&gt;\n    &lt;li class=\"graf--li\"&gt;Safari / Chrome (1.0 / 1.3 +)&lt;/li&gt;\n    &lt;li class=\"graf--li\"&gt;Opera (10.5+)&lt;/li&gt;\n    &lt;li class=\"graf--li\"&gt;at\u00E9 mesmo no Internet Explorer (9.0+)&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;p class=\"graf--p\"&gt;Bibliografia (Fontes)&lt;/p&gt;\n\n&lt;div class=\"graf--mixtapeEmbed\"&gt;&lt;a class=\"markup--anchor markup--mixtapeEmbed-anchor\" title=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-image\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-image\"&gt;&lt;strong class=\"markup--strong markup--mixtapeEmbed-strong\"&gt;background-image&lt;/strong&gt; - &lt;em class=\"markup--em markup--mixtapeEmbed-em\"&gt;The CSS background-image property sets one or several background images for an element. The images are drawn on\u2026&lt;/em&gt;developer.mozilla.org&lt;/a&gt;&lt;/div&gt;\n\n&lt;div class=\"graf--mixtapeEmbed\"&gt;&lt;a class=\"markup--anchor markup--mixtapeEmbed-anchor\" title=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds\"&gt;&lt;strong class=\"markup--strong markup--mixtapeEmbed-strong\"&gt;Multiple backgrounds&lt;/strong&gt; - &lt;em class=\"markup--em markup--mixtapeEmbed-em\"&gt;Com CSS3\u00A0, voc\u00EA pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da\u2026&lt;/em&gt;developer.mozilla.org&lt;/a&gt;&lt;/div&gt;"^^<http://www.w3.org/2001/XMLSchema#string>
<http://tableless.com.br/css3%e2%80%8a-%e2%80%8atrabalhando-com-multiplas-imagens-background-images/>