Fundo com Imagem e Cor

[Matheus Weber 4]

Bom, eu preciso criar um fundo que contenha uma imagem e uma cor, tipo, quando a imagem acabar eu quero que o fundo se complemente com uma cor gradiente...

 

Eu já tentei de algumas formas mas não consegui...

 

Primeiro eu tentei colocar o fundo na div:

 

#conteudo{
   width:100%;
   min-height:900px;
background-image:
url(../imgs/praia.png);
background-repeat:no-repeat;
background: #89e3e3; /* Old browsers */
background: -moz-linear-gradient(45deg, #89e3e3 5%, #ededed 27%,
#89bba7 48%, #e8e8c5 70%, #89e3e3 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top,
color-stop(5%,#89e3e3), color-stop(27%,#ededed),
color-stop(48%,#89bba7), color-stop(70%,#e8e8c5),
color-stop(95%,#89e3e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #89e3e3 5%,#ededed
27%,#89bba7 48%,#e8e8c5 70%,#89e3e3 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #89e3e3 5%,#ededed 27%,#89bba7
48%,#e8e8c5 70%,#89e3e3 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #89e3e3 5%,#ededed 27%,#89bba7
48%,#e8e8c5 70%,#89e3e3 95%); /* IE10+ */
background: linear-gradient(45deg, #89e3e3 5%,#ededed 27%,#89bba7
48%,#e8e8c5 70%,#89e3e3 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#89e3e3', endColorstr='#89e3e3',GradientType=1 ); /*
IE6-9 fallback on horizontal gradient */
   padding-top:200px;

}

 

Nesse caso, a imagem não aparece, só o gradiente.

 

Depois eu tentei colocar a imagem na div e posicionar o fundo ficando assim:

 

  <img src="imgs/praia.png" style="width:100%;position: absolute;
top: 0;
left: 0;
   z-index:-1;
   ">

E o CSS igual só que sem o bg-image.

 

Mas acontece que a imagem fica atrás do fundo, e quando eu tiro o z-index:-1, a imagem fica na frente do conteúdo da div... tentei colocar tudo na div com z-index:2 e a imagem com z-index:-1, mas nada também.

 

Se eu tiro o position absolute ele desce todo o conteúdo...

 

Engraçado é que no IE funciona, mas não pega o gradient...

[Marco Bruno 19]

Boa tarde, Matheus Weber.

 

Primeiro você utilizou o "background-image" e logo abaixo você utilizou a forma resumida que é o "background", ou seja, quando você utilizou a forma resumida acabou sobre escrevendo o valor do "background-image".

 

Outro ponto é que o gradiente por css é uma "background-image", sendo assim, você não vai conseguir colocar uma imagem e o gradiente por css ao mesmo tempo sem usar o Multiple Background.

 

Segue um exemplo de como usar o Multiple Background:

 

background-image: url('caminhoDaPrimeiraImagem'), url('CaminhoDaSegundaImagem'), ..., url('CaminhoDeNImagens');

[Evandro Oliveira 331]

Bom, eu preciso criar um fundo que contenha uma imagem e uma cor, tipo, quando a imagem acabar eu quero que o fundo se complemente com uma cor gradiente...

 

Eu já tentei de algumas formas mas não consegui...

 

Primeiro eu tentei colocar o fundo na div:

 

#conteudo{
   width:100%;
   min-height:900px;
background-image:
url(../imgs/praia.png);
background-repeat:no-repeat;
background: #89e3e3; /* Old browsers */
background: -moz-linear-gradient(45deg, #89e3e3 5%, #ededed 27%,
#89bba7 48%, #e8e8c5 70%, #89e3e3 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top,
color-stop(5%,#89e3e3), color-stop(27%,#ededed),
color-stop(48%,#89bba7), color-stop(70%,#e8e8c5),
color-stop(95%,#89e3e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #89e3e3 5%,#ededed
27%,#89bba7 48%,#e8e8c5 70%,#89e3e3 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #89e3e3 5%,#ededed 27%,#89bba7
48%,#e8e8c5 70%,#89e3e3 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #89e3e3 5%,#ededed 27%,#89bba7
48%,#e8e8c5 70%,#89e3e3 95%); /* IE10+ */
background: linear-gradient(45deg, #89e3e3 5%,#ededed 27%,#89bba7
48%,#e8e8c5 70%,#89e3e3 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#89e3e3', endColorstr='#89e3e3',GradientType=1 ); /*
IE6-9 fallback on horizontal gradient */
   padding-top:200px;

}

 

Nesse caso, a imagem não aparece, só o gradiente.

 

Depois eu tentei colocar a imagem na div e posicionar o fundo ficando assim:

 

  <img src="imgs/praia.png" style="width:100%;position: absolute;
top: 0;
left: 0;
   z-index:-1;
   ">

E o CSS igual só que sem o bg-image.

 

Mas acontece que a imagem fica atrás do fundo, e quando eu tiro o z-index:-1, a imagem fica na frente do conteúdo da div... tentei colocar tudo na div com z-index:2 e a imagem com z-index:-1, mas nada também.

 

Se eu tiro o position absolute ele desce todo o conteúdo...

 

Engraçado é que no IE funciona, mas não pega o gradient...

 

1. Tenta colocar background-image como última regra. Vai pegar em navegadores que suportam múltiplos backgrounds

 

2. Ao invés de criar um img, crie um elemento em branco, contendo a imagem de fundo

 

2.1 Dê preferência para o pseudo-elemento after IE8+

 

#conteudo {
   /* todas as regras anteriores */
   position: relative;
}

#conteudo:after {
   background-image: url();
   bottom: 0;
   content: ""
   display: block;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
}

 

Se não for possível, faça a markup manualmente.

[Matheus Weber 4]

Bom, tentei com multiplo BG, aparece a imagem, mas não pega o gradient...

 

#conteudo{
   width:100%;
   min-height:100%;
overflow:hidden;

background-repeat:no-repeat;
background: url(../imgs/praia.png) #89e3e3; /* Old browsers */
background: url(../imgs/praia.png) -moz-linear-gradient(45deg, #89e3e3 5%, #ededed 27%,
#89bba7 48%, #e8e8c5 70%, #89e3e3 95%); /* FF3.6+ */
background: url(../imgs/praia.png) -webkit-gradient(linear, left bottom, right top,
color-stop(5%,#89e3e3), color-stop(27%,#ededed),
color-stop(48%,#89bba7), color-stop(70%,#e8e8c5),
color-stop(95%,#89e3e3)); /* Chrome,Safari4+ */
background: url(../imgs/praia.png) -webkit-linear-gradient(45deg, #89e3e3 5%,#ededed
27%,#89bba7 48%,#e8e8c5 70%,#89e3e3 95%); /* Chrome10+,Safari5.1+ */
background: url(../imgs/praia.png) -o-linear-gradient(45deg, #89e3e3 5%,#ededed 27%,#89bba7
48%,#e8e8c5 70%,#89e3e3 95%); /* Opera 11.10+ */
background: url(../imgs/praia.png) -ms-linear-gradient(45deg, #89e3e3 5%,#ededed 27%,#89bba7
48%,#e8e8c5 70%,#89e3e3 95%); /* IE10+ */
background: url(../imgs/praia.png) linear-gradient(45deg, #89e3e3 5%,#ededed 27%,#89bba7
48%,#e8e8c5 70%,#89e3e3 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#89e3e3', endColorstr='#89e3e3',GradientType=1 ); /*
IE6-9 fallback on horizontal gradient */
   padding-top:200px;
background-image:
;
background-repeat:no-repeat;
/*background-position: 200px 626px;*/
}

 

Depois tentei colocando o background-image lá pra baixo, mas só fica a imagem =/

 

Alguém tem uma sugestão de como fazer pela segunda forma? Me parece a que tem mais chances de dar certo, com a imagem antes de todo o conteúdo e o bg normal.

[Marco Bruno 19]

Matheus Weber,

 

Fiz um teste local:

 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Multiple Background</title>
<style type="text/css">
	header {
		background: url('batman.jpg') no-repeat, -moz-linear-gradient(#FFFFFF 50%, #DADFE3);
		height: 200px;
	}
</style>
</head>
<body>
<header>
	<h1>Teste</h1>
</header>
</body>
</html>

 

Esse código funcionou normalmente.

 

Qualquer dúvida só chamar.