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.