Foros del Web » Creando para Internet » CSS »

superponer dos fondos

Estas en el tema de superponer dos fondos en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/08/2005, 15:23
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
superponer dos fondos

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-imageurl("img/puntos.gif");
    
positionfixed;
    
width:100%; height:100%;
    
top:0pxleft:0px;
    
z-index:-2;
}
#fondo2 {
    
background-imageurl("img/fondo_degradado.png");
    
positionfixed;
    
top:0pxleft: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?
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #2 (permalink)  
Antiguo 27/08/2005, 15:38
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
Porqué simplemente no pones el tercer fondo? si ya lo tienes hecho.. para que superponer?
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #3 (permalink)  
Antiguo 27/08/2005, 16:12
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #4 (permalink)  
Antiguo 28/08/2005, 17:57
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #5 (permalink)  
Antiguo 12/09/2005, 12:14
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #6 (permalink)  
Antiguo 13/09/2005, 17:15
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
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*/
    
filterprogid:DXImageTransform.Microsoft.gradient(gradientType=1startColorstr=#0000FF00, endColorstr=#99000055);
}
#contenido {
    
width:30%;
    
height:50%; 
    
background-color:white
    
padding:20px
    
position:relative
    
left35%; top50px;
}
</
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!

__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #7 (permalink)  
Antiguo 13/09/2005, 18:03
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
aca hay una forma de hacerlo con PHP y sirve para bg tambien.
http://koivi.com/ie-png-transparency/
  #8 (permalink)  
Antiguo 13/09/2005, 21:35
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Sencillamente, brillante.

Gracias por el enlace RoQ
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #9 (permalink)  
Antiguo 12/10/2005, 01:21
 
Fecha de Ingreso: octubre-2005
Mensajes: 2
Antigüedad: 12 años, 2 meses
Puntos: 0
defnitivamente muchas gracias por el enlace es una maravilla. Sabes si hay un enlace en español ?
saludos, diego
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:18.