Foros del Web » Creando para Internet » CSS »

Poder poner 2 backgrounds fijos

Estas en el tema de Poder poner 2 backgrounds fijos en el foro de CSS en Foros del Web. <body style="background-attachment: fixed;" background="img511.imageshack.us/img511/1051/stpat002yn9.jpg"> --------------------- <html> <head> <style type="text/css"> BODY { background-image: url("img472.imageshack.us/img472/4451/bienvenidogh5.gif"); background-attachment: fixed; background-repeat: no-repeat; background-position: bottom right; } </style> </head> <body> </body> ...
  #1 (permalink)  
Antiguo 18/02/2007, 18:42
 
Fecha de Ingreso: febrero-2007
Mensajes: 4
Antigüedad: 10 años, 9 meses
Puntos: 0
Poder poner 2 backgrounds fijos

<body style="background-attachment: fixed;"
background="img511.imageshack.us/img511/1051/stpat002yn9.jpg">

---------------------
<html>
<head>
<style type="text/css">
BODY {
background-image: url("img472.imageshack.us/img472/4451/bienvenidogh5.gif");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
</head>
<body>
</body>
</html>

Hola, tengo una duda, y es que quiero poner en una web hecha por HTML, estas 2 imagenes; la primera del trebol, como fondo fijo y que se repita, y la del muñeco marron tambien fija, pero en la esquina inferior derecha de la pagina. Tengo estos 2 codigos, pero o pongo uno, o pongo otro, porque no me deja tener los 2 a la vez. Como puedo juntarlos, o la forma de poder tener estas 2 imagenes en la misma pagina web? Saludos
  #2 (permalink)  
Antiguo 18/02/2007, 22:34
Avatar de jaquez  
Fecha de Ingreso: noviembre-2006
Mensajes: 123
Antigüedad: 11 años
Puntos: 0
Re: Poder poner 2 backgrounds fijos

mmm no lo creo eso no esta bien
no se puede...
  #3 (permalink)  
Antiguo 19/02/2007, 18:55
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Re: Poder poner 2 backgrounds fijos

Es pregunta de Css.

Lo que puedes hacer es la segunda imagen de abajo a la derecha es posicionarla absolutamente y ponerle un z-index menor al resto de la página

<img src="monito.jpg" style="position: absolute; right: 10px; bottom: 10 px; z-index: -1;">

En realidad el -1 a veces no funciona correctamente, en dado caso ponle z-index = 1 y mete el resto de la página en un div y ponle z-index = 2.
  #4 (permalink)  
Antiguo 21/02/2007, 17:38
 
Fecha de Ingreso: febrero-2007
Mensajes: 4
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Poder poner 2 backgrounds fijos

Rafael Gracias por contestar.

Bueno exactamente no es lo que busco esto, ya que la imagen del monito me queda arriba sin moverse, y no es mi intencion que quede asi. Sino exactamente igual que en esta web, javimoya.com. Pero en vez de un fondo liso, poder poner yo el personalizado, y que se repita.

¿Tiene solucion, lo que pido? ¿O no se puede hacer de ninguna de las maneras?


Saludos
  #5 (permalink)  
Antiguo 21/02/2007, 18:12
Avatar de demiurgo_daemon  
Fecha de Ingreso: diciembre-2006
Ubicación: Querétaro
Mensajes: 184
Antigüedad: 11 años
Puntos: 2
Re: Poder poner 2 backgrounds fijos

Lo primero es que quites el fondo declarado en HTML.

Ahora bien, tienes dos opciones:

1. Lo que hace javimoya.com es poner un solo fondo de color liso con la imagen. Para lograr lo que buscas, podrías darle una textura a ese único fondo y hacerlo de una altura impráctica (por ejemplo, 2000px). El fondo declarado en CSS queda igual.

2. Tomando en cuenta lo que propone Rafael, nada más necesitarías un cambio:
Código:
<img src="monito.jpg" style="position: fixed; right: 10px; bottom: 10 px; z-index: -1;">
(posiblemente tengas que poner z-index positivo; depende de lo que quieras lograr)

El fondo que declares en CSS sería más sencillo (sólo es la textura) y lo puedes hacer más chico para hacer el mosaico desde CSS:

Código:
body{
background-image: url("img472.imageshack.us/img472/4451/bienvenidogh5.gif");
background-repeat: repeat;
background-position: top right;
}
La ventaja de la primera opción es que funciona en Explorer 6 (por si te interesa, a mi personamente no mucho). La segunda opción te da mayor flexibilidad por si quieres, por ejemplo, ponerle un enlace a la imagen.

saludos
  #6 (permalink)  
Antiguo 22/02/2007, 01:34
 
Fecha de Ingreso: marzo-2001
Ubicación: Concordia, Entre Ríos
Mensajes: 137
Antigüedad: 16 años, 9 meses
Puntos: 0
Re: Poder poner 2 backgrounds fijos

otra opción sería

en el archivo css:

body {
background: url('laimagen/de/fondototal.gif') repeat;
}

#page {
background-image: url('imagen/fija/monito.gif');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom right;
}


y en el HTML
<body>
<div id="page">
todo el contenido de tu pagina, bla bla bla
</div>
</body>

de esta forma, con el estilo en el body generas el fondo global pa'todo.... y usas el div "page" como un "falso" body, por decirlo de alguna forma, donde colocas al monito saludador....

en una web que estoy preparando, hago algo parecido para tener dos "fondos degradé".... en ambos márgenes.... y me funciona bien en IE, firefox....

espero que sirva,.
saludos
juan pablo
__________________
Gracias y de nada! (blog) Dolar Euro
  #7 (permalink)  
Antiguo 22/02/2007, 01:50
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
Re: Poder poner 2 backgrounds fijos

yo apollo la decicion de jotap ya que no usas elementos posicionados que trae muchos errores con IE <6..
es mucho mas sencilla y solo tiene que tene una div mas..
segun entenidi css3 ya lo tendra ..

solo retocaria un poco el codigo:
Cita:
background:transparent url('imagen/fija/monito.gif') no-repeat bottomright;
simplemente para ponerlo en una linea !
__________________
Saludos
FT.
www.fernando.com.mx
  #8 (permalink)  
Antiguo 22/02/2007, 11:54
 
Fecha de Ingreso: marzo-2001
Ubicación: Concordia, Entre Ríos
Mensajes: 137
Antigüedad: 16 años, 9 meses
Puntos: 0
Re: Poder poner 2 backgrounds fijos

tiene razon fer10, no se porque puse el contenido mas limpio en body {
y mas largo en #page....
je...
__________________
Gracias y de nada! (blog) Dolar Euro
  #9 (permalink)  
Antiguo 22/02/2007, 19:27
 
Fecha de Ingreso: febrero-2007
Mensajes: 4
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Poder poner 2 backgrounds fijos

Buenas otra vez, bueno si que hubieron contestaciones, aunque sigo sin encontrar el resultado esperado.

Al final puse lo que dijo juan pablo:

<body style="background-attachment: fixed;"
background="img511.imageshack.us/img511/1051/stpat002yn9.jpg">

<body>
<div id="img472.imageshack.us/img472/4451/bienvenidogh5.gif">
</div>
</body>

Lo pongo tal cual, pero sigue sin salirme el monito, solamente se me ve el fondo repetitivo...
Nose si es que hago algo mal, como no entiendo de esto, o nose... las otras contestaciones eran de ccs, y debo trabajar con Html obligatoriamente, por eso pido el codigo en Html a la fuerza, sino fuese asi, seguramente lo tendriamos mas facil.

Bueno pues esperaremos otra respuesta. Saludos y aver si a la proxima lo tenemos
  #10 (permalink)  
Antiguo 22/02/2007, 20:10
 
Fecha de Ingreso: marzo-2001
Ubicación: Concordia, Entre Ríos
Mensajes: 137
Antigüedad: 16 años, 9 meses
Puntos: 0
Re: Poder poner 2 backgrounds fijos

debel: me parece que estamos confundiendo algunas cosas... no se a que te refieres cuando dices "debo trabajar con HTML obligatoriamente"...

cuando en una tabla, en un div, en cualquier lado pones style= Ya está! eso es CSS.... el CSS (hojas de estilo....) se integra al HTML y....
bueno ahora no tengo tiempo, pero bien estaría que alguien pueda escribir un par de líneas para explicar esto que suele ser un error muy común, sino mañana vuelvo e intento explicar algo...

pero te paso la solución que necesitas:

en tu html simplemente pones....

<body style="background: url('img511.imageshack.us/img511/1051/stpat002yn9.jpg');">

<div style="background: transparent url('imagen/fija/monito.gif') no-repeat bottom right;">

todo el contenido de tu pagina

y al final cierras

</div>
</body>

controla bien la ruta de las imagenes en body y en div....

copia y pega esto y tiene que andar

mañana con mas tiempo vuelvo y explico alguna cosa importante que me parece, esto de confundir html, csss y etc.... (si es que alguien no quise explayarse ya sobre el asunto)

saludos
juan pablo

PD: cualquier cosa, fijate y mandame un email y lo resolvemos más rápido....
__________________
Gracias y de nada! (blog) Dolar Euro
  #11 (permalink)  
Antiguo 05/03/2007, 19:43
 
Fecha de Ingreso: febrero-2007
Mensajes: 4
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Poder poner 2 backgrounds fijos

Perdon por no haber contestado antes. Pero les escribo ahora para decirle a jotap, que al final no me funciono el codigo que me dio, ya que no se veia el muñeco con este codigo, sino unicamente el fondo fijo.

Igual dejo la duda aqui, por si alguien sabe de solucionarlo.
  #12 (permalink)  
Antiguo 05/03/2007, 21:44
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Re: Poder poner 2 backgrounds fijos

y ya viste como lo hacen en esa pagina que pones?

Código:
 .truco {
    background-image: url(images/gatito.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom right;
}
<body class="truco">
__________________
CreandoWebs.com
www.creandowebs.com
PLANTILLAS TEMPLATEMONSTER CON 10% DE DESCUENTO
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 20:41.