Problema con Background FIXED

[Rebe_Lunitari]

Hola, buenas.

Vereís, tengo un pequeño problemilla con la posicion de las imagenes (tengo varias) del background de mi web.

Imita un fondo marino, por lo que quiero que este situado siempre abajo, al fondo. La imagen correcta que debería verse, sería esta (es un recorte de la esquina inferior derecha): http://img215.imageshack.us/img215/7560/correcto01.png

Estaría compuesta por el fondo azul que forma parte de un degradado (zindex: 0), la imagen de la arena (zindex: 1) , y el barco (zindex: 2), son su sombra suavizada.

Lo lógico sería aplicarle el parametro FIXED. Pero cuando lo previsualizo, me ocurre esto:

1. Al previsualizar la pagina, me corta la sombra del barco: http://img267.imageshack.us/img267/3807/23515705.png

2. Al hacer scroll, es como si se superpusieran capas encimas de otras: http://img196.imageshack.us/img196/1045/83558524.png

Asíq probé a aplicarle SCROLL en lugar de fixed. Aparentemente, todo funcionaba bien. http://img215.imageshack.us/img215/7560/correcto01.png Salvo cuando el tamaño de la ventana varia (por ejemplo, al pasar de una pantalla grande, a una pequeña), que me sucede esto:

1. El fondo se ve en el bottom del area que podemos visualizar, pero en cuanto hagamos scroll, ocurrira esto: http://img585.imageshack.us/img585/5968/correcto02.png

¿Teneís alguna idea de como poder solucionarlo? Mi intención original, era que el fondo siempre se mantuviera visible en pantalla, y que el contenido fuera el que se mueve. Se supone que para eso es FIXED ¿no? Sin embargo, no termino de ver que suceda así.

Gracias de antemano!

PD: ¿Cual es la manera de postear correctamente las imagenes?

[Karmac]

¿Puedes poner tu código CSS y HTML?
Puedes utilizar CSS3 para poner múltiples imágenes de fondo.
Otra solucción hacer una imagen con algún programa tipo Photoshop, de forma que solo tengas un fondo.
¿Pusiste "fixed" al background? http://www.w3schools.com/cssref/pr_b...attachment.asp

Saludos.

[Rebe_Lunitari]

Pues te explico. Use una capa div vacia para cada imagen utilizada de fondo. Como explique arriba, probe con los dos parametros tanto fixed como scrroll... y los dos funcionan mal.

El degradado esta colocado como fondo del body, y su css es este:

body {
background: #034591 url(../images/degradado.png) repeat-x;
}

Esto es el html para los fondos, estan colocados dentro del body.

<div id="extra1"></div>
<div id="extra7"></div>

CSS para el fondo del agua:

#extra1 {
background: url(../images/agua.png) repeat-x fixed left bottom;
width: 100%;
height: 100px;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
position: absolute;
z-index: 0;
}

CSS para el barco:

#extra7 {
background: url(../images/barco.png) no-repeat fixed right bottom;
width: 190px;
height: 274px;
bottom: 5%;
right: 0;
margin: 0;
padding: 0;
position: absolute;
z-index: 3;
}


La opcion de hacer una sola imagen es inviable. Me limita a una resolución en concreto.

[Karmac]

Prueba poniendo un div dentro de otro:

Código HTML:

<div class="capa1">
<div class="capa2">
</div>
</div>
 

Así no tendrás que andar posicionando los elementos. Saludos.

[Rebe_Lunitari]

No funciona tampoco esa solución. Sigue pasando lo mismo, en cuanto hagas scroll, (en caso de ser necesario, o varies el tamaño de pantalla) abajo queda una franca del color de fondo, q al subir y bajar se suporne a las demas capas.

Ese color y degradado estan en el body, deberia posicionarlos?

[Karmac]

¿El fondo de agua está situado en una ventana que puede variar de tamaño, verdad? Puede ser que, aún estando el fondo "fixed", cuando la ventana tenga dimensiones más grandes que la propia imagen, se vea el hueco que deja.
Prueba a ponerle "repeat-y" a #extra1a ver si se rellena el hueco.

Saludos.

[Rebe_Lunitari]

Buenas, siento haber tardado tanto en responder, pero con todo lo de fin de año...

Y nada, esa ultima solucion que me dices, no me produce ningun cambio. Aparentemente el fondo esta en su sitio, hasta que se cambia el tamaño de la ventana. No tengo ni idea de como solucionar esto y es un verdadero engorro...



PD: Feliz año

[Rebe_Lunitari]

Ninguna otra sugerencia? Sigo sin solucion :(

[emprear]

proba poniendo el degrade como fondo del html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
html, body, div{
padding: 0;
border: none;
margin:0;
}
html{
background: url(degradado.png) repeat fixed top center;
}
body{
height: 100%;
}
div#arena{
width: 100%;
z-index: 900;
height:60px;
background: url(arena.png) fixed center center;
position: fixed;
bottom: 0;
left: 0;
}
div#barco {
position: fixed;
bottom: 0;
right: 0;
z-index: 950;
width: 191px;
height: 335px;
background: url(barco.png) no-repeat;
}
div#contenido{
position: absolute;
width: 100%;
height: auto;
baclground-color: transparent;
z-index: 999;
}
/*]]>*/
</style>
</head>
<body>
<div id="barco"></div>
<div id="arena"></div>
<div id="contenido">
<p>contenido</p>
<p>contenido</p>
</div>                          
</body>
</html>
 

faltaría ajustar el alto de las capas para barco y arena

Saludos

[Rebe_Lunitari]

Nada.

Si coloco el degradado en el HTML directamente desaparece, y se queda en blanco. Los demás problemas persisten.

De momento he dejado todas las imagenes del fondo, en SCROLL. Ninguna se corta, y se ven correctamente en su posicion. El único problema que me surge, es que cuando la ventana es que si el tamaño de la ventana se hace mas pequeño y tengo que usar, precisamente, el scroll, la imagen de la arena queda en la ubicacion bottom original. No se desplaza al bottom de la ventana a medida que hago scroll.

No se si me explique bien...

[emprear]

Y lo veo bien, al menos por lo que se entiende de tu post

demo

http://foros.emprear.com/tfdw/bg/demo.html

Saludos

[Rebe_Lunitari]

Pues si, en la demo se ve bien y no lo entiendo (aunq no se ve el degradado, el fondo simplemente se ve azul).

Probe a eliminar todo el contenido, y dejar solamente las imagenes de fondo. Fui añadiendolas una a una, para ver si alguna de ellas era la que daba error, o si era el contenido.

El contenido no tenia nada que ver, al final son las propias imagenes las que dan el problema.

Te paso la direccion, con la pagina subida para que veas el fondo completo.

http://www.rebecacastaneda.eu.pn

Cada imagen que ves ahi (estan en SCROLL), los reflejos de la parte superior, los rayos centrales, la arena, los peces y el barco... estan en div distintos. Los reflejos superiores no me suponen ningun problema, pero evidentemente los de abajo si.

Ahora, prueba a hacer la ventana mas pequeña hasta que te aparezca el scroll y baja hasta abajo. Veras que bajo la arena queda una franja azul...

Y si las coloco como fixed, se superponen unas a otras como si no fueran pngs transparentes. No quedan fijas como en tu caso...

[emprear]

Iniciado por Rebe_Lunitari

Pues si, en la demo se ve bien y no lo entiendo (aunq no se ve el degradado, el fondo simplemente se ve azul).

Eso es porque mi "degradé" es bastante precario
http://foros.emprear.com/tfdw/bg/degradado.png
Ahora le puse el tuyo y usé tus imágenes,
Y al ajustar las ventanas todo se mantiene abajo.
Tambien le agregue un div centrado como simulando a tu contenido

revisá nuevamente http://foros.emprear.com/tfdw/bg/demo.html

Al agua le di un repeat porque mi monitor es de 1400 de ancho, sería bueno que hagas esa imagen más ancha (1600px al menos)

Saludos

[Rebe_Lunitari]

¡Funciona! Quizá quieras echarle un ojo.

http://www.rebecacastaneda.eu.pn/

El problema era bastante simple... Había puesto:

Código:

background: url(../images/arena.png) repeat-x fixed left bottom;

Y ademas, había puesto:

Código:

position: absolute

No me había dado cuenta! Pero ahora funciona bien, incluso con el degradado en el Body.

Muchisimas gracias :)