Hola de nuevo.
He probado el css cambiando algunas cositas, y funciona pero sólo si no me desplazo hacia lo largo de la página (hacia abajo con la barra del navegador, porque las .png no se mueven, quicir).
El código que he utilizado es el siguiente:
CSS:
Código:
#contenedor_1 {
width: 600px;
height: 700px;
background-color: 000000;
color: dimgray;
font-family: courier new;
font-size: 10px;
font-weight: bold;
text-align: center;
overflow-y: scroll;
padding: 2px;
margin-left: 4px;
margin-right: 8px;
background-image:url(mi_fondo.jpg);
background-repeat: no-repeat;
image-attachment: fixed;
image-align: left;
text-margin: left 2px;
text-margin: right 6px;
}
.top_1 {
height: 119px;
width: 573px;
position: fixed;
top: 0;
background-image: url(tapa_imagen_top.png);
}
.bottom_1 {
height: 119px;
width: 573px;
position: fixed;
top: 585px;
background-image: url(tapa_imagen_bottom.png);
}
y en el HTML:
Código:
<div id="contenedor_1">
<p style="margin-left:2px; margin-right: 6px">
<br /><br />
Todo el texto e imágenes aquí....
<br /></p>
<div class="top_1"></div>
<div class="bottom_1"></div>
</div>
Bueno, he puesto el "_1" porque pienso incluir dos scrollbar con diferentes estilos pero de momento sólo he probado con uno.
Se me ocurrió cambiar el valor de position: fixed; en .top_1 y .bottom_1 y como no iba añadí al css esta línea que no sé para qué sirve, pero algo hará!
Código:
* {margin:0; padding:0;position: relative;}
probando, probando... hasta que al final no se veía ninguna de las 3 imágenes de fondo u.u ¿Hay algo en el código que claramente se vea que está mal?
Ya siento daros la brasa con esto, estoy aprendiendo y hay cantidad de información por ahí como para volerme loca probando y me falta tiempo para leer manuales (voy a cachitos..).
Por curiosidad también estoy mirando por ahí cómo sería con z-index (como alternativa).
Un saludo y gracias.
