Poder poner 2 backgrounds fijos

Debel · #1 (**permalink**) 18/02/2007, 18:42

<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

jaquez · #2 (**permalink**) 18/02/2007, 22:34

mmm no lo creo eso no esta bien
no se puede...

Rafael · #3 (**permalink**) 19/02/2007, 18:55

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.

Debel · #4 (**permalink**) 21/02/2007, 17:38

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

demiurgo_daemon · #5 (**permalink**) 21/02/2007, 18:12

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

jotap · #6 (**permalink**) 22/02/2007, 01:34

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

fer10 · #7 (**permalink**) 22/02/2007, 01:50

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 !

jotap · #8 (**permalink**) 22/02/2007, 11:54

tiene razon fer10, no se porque puse el contenido mas limpio en body {
y mas largo en #page....
je...

Debel · #9 (**permalink**) 22/02/2007, 19:27

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

jotap · #10 (**permalink**) 22/02/2007, 20:10

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....

Debel · #11 (**permalink**) 05/03/2007, 19:43

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.

sjam7 · #12 (**permalink**) 05/03/2007, 21:44

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;
}