superponer dos fondos

derkenuke · #1 (**permalink**) 27/08/2005, 14:23

La idea es tener un fondo base:

Y ponerle por encima un degradado PNG para hacerlo mas bonito:

Para mí queda espectacular:

Lo que hago es colocar dos divs de tamaños 100% en position:fixed, uno con z-index:-2 (puntos) y el otro con z-index:-1. El codigo es:

Código PHP:

  #fondo1 {

    background-image: url("img/puntos.gif");

    position: fixed;

    width:100%; height:100%;

    top:0px; left:0px;

    z-index:-2;

}

#fondo2 {

    background-image: url("img/fondo_degradado.png");

    position: fixed;

    top:0px; left:0px;

    width:100%; height:100%;

    z-index:-1;

}

Código PHP:

  <div id="fondo1">&nbsp;</div>

<div id="fondo2">&nbsp;</div>

Ahora viene el problema: sólo me funciona bajo Opera.
En firefox los z-index no me hacen ni caso. Los negativos hacen desaparecer las capas, los positivos tapan toda mi pagina (aunque la pagina tenga z-index:100).
Del IE ni hablamos... por cierto hay alguna esperanza de que funcione?

¿Como hago que funcione en mozilla?

braulito · #2 (**permalink**) 27/08/2005, 14:38

Porqué simplemente no pones el tercer fondo? si ya lo tienes hecho.. para que superponer?

derkenuke · #3 (**permalink**) 27/08/2005, 15:12

Claro.

Un fondo asi entonces?

Superponiendo lo tienes ajustado a todas las resoluciones, y cada imagen te ocupa 1Kb o menos (la de los puntos mucho menos). 2 degradados y un motivo repetitivo=>2Kb. Codigo total=> Unos 400b. Redondeando: colorido por 3Kb.
De la otra manera: desajustado para distintas resoluciones. Imagen=>170kB, codigo=>60b. Redondeando: 170Kb.
Enfrentados.. tienen poco que ver.

Consiste en poner un degradado de derecha a izquierda y otro de arriba a abajo. Hasta podrias poner incluso alguna imagen despues encima de todos esos fondos.

Eso no se consigue poniendo directamente un fondo, tienes que superponer varios.

De todas maneras deberia funcionar ese codigo no? Es mi pregunta.

derkenuke · #4 (**permalink**) 28/08/2005, 16:57

Lo he solucionado poniendo un position:relative envolviendo a todo mi contenido.

Para Opera lo he hecho con un z-index:4 para el contenido, sin mas.

Para IE.. lo he dado por imposible.

furoya · #5 (**permalink**) 12/09/2005, 11:14

Hola derkenuke , braulito :

He leído por ahí que se puede poner dos fondos, uno para el html y otro para el body, aunque creo que es solamente para colores, no para imágenes. No se pierde nada con buscar. Tampoco sé en qué navegadores o con qué doctype trabaja.

En IE5.5+ se puede hacer un degradado sin imágenes, usando DX o VML. Lo que simplifica mucho las cosas. En el ejemplo hay una animación para que se vea la transparencia del div; que se puede cambiar con los valores Alfa.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>

body {background-image:url("http://img40.imageshack.us/img40/6968/fondodegradado9hf.png") ; height:100%;}

#abs {position:absolute; z-in dex:-10; height:25%; width:50%; left:25%; padding:10px; 
filter: progid:DXImageTransform.Microsoft.gradient
(gradientType=1, startColorstr=#5500FF00, endColorstr=#55FF0000) /*LOS DOS PRIMEROS VALORES DE COLOR SON ALPHA; gradientType=0*/}

</style>
<script>

var arr = 0;
function mueve(){
document.getElementById("abs").style.top = arr + "px";
if (arr > document.body.clientHeight)  arr = 0;
else arr += 2 ;

setTimeout("mueve()", 100);
}

</script>
</head>
<body onload="mueve()">

<div id="abs">
QWERTYUIOP
</div>

</body>
</html>

Solamente hay que cambiar el efecto para cada navegador con un script.

Un detalle más. El formato PNG no es soportado por IE hasta la versión 7. Existe también un DX para corregir ésto que anda por el foro de CSS.

saludos

furoya

derkenuke · #6 (**permalink**) 13/09/2005, 16:15

Muy interesante furoya, gracias por aportar

Lo de que PNG no esta soportado hasta IE7 ya lo conocia. Tambien conozco el famoso hack, pero para imagenes de fondo no he investigado a aplicarlo.

No conocia ese DX, pero me gusta. Aqui tenemos un ejemplo de como lo podriamos implementar:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style>

body {

    height:100%;    

    background-image:url("http://img40.imageshack.us/img40/6968/fondodegradado9hf.png");

    background-attachment:fixed;

}

#abs {

    position:absolute;

    z-index:-10;

    height:100%; width:100%;

    /*LOS DOS PRIMEROS VALORES DE COLOR SON ALPHA*/

    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#0000FF00, endColorstr=#99000055);

}

#contenido {

    width:30%;

    height:50%; 

    background-color:white; 

    padding:20px; 

    position:relative; 

    left: 35%; top: 50px;

}

</style>

</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<script>

window.onscroll=function(){

    document.getElementById("abs").style.top = document.body.scrollTop+"px";

}

</script>

 
<div id="abs">&nbsp;</div>

 
<div id="contenido">

    Este sería el contenido del documento!

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

</div>

 
 
</body>

</html>

Hasta igual podemos hacer mas tonterias... estoy leyendo de paginas de referencia de microsoft los filtros...

http://msdn.microsoft.com/library/de...s/gradient.asp

Tiene ejemplos para jugar con ello.

Muchas gracias por la info! Seguro que podemos hasta ahorrarnos alguna que otra imagen!

RoQ · #7 (**permalink**) 13/09/2005, 17:03

aca hay una forma de hacerlo con PHP y sirve para bg tambien.
http://koivi.com/ie-png-transparency/

derkenuke · #8 (**permalink**) 13/09/2005, 20:35

Sencillamente, brillante.

Gracias por el enlace RoQ

diego santos · #9 (**permalink**) 12/10/2005, 00:21

defnitivamente muchas gracias por el enlace es una maravilla. Sabes si hay un enlace en español ?
saludos, diego