Imagen de fondo al frente de todo

Hola a todos, primer mensaje de este lado del foro. Hice una plantilla en Artisteer, pero ya estoy editando yo el codigo CSS para que quede como necesito. Pero me encontre con un problema, la imagen de fondo que agrege por medio de codigo es la siguiente:

Funciona perfecto en el sentido de la posición que es abajo y sin repetirse, la imagen es un PNG transparente, lo unico que me falta por lograr es que venga al frente de la pagina

.art-sheet-body
{
background-image: url('images/fondo.png');
background-repeat: no-repeat;
background-position: left bottom;
position: relative;
z-index: 1;
padding: 3px;
}

Aqui esta la pagina donde se esta aplicando el estilo.

http://pruebas.simple2go.net/home.aspx

Como veran la imagen se sigue estando abajo del contenido, y lo qu ese requiere es que este arriba del contenido.

Esta es la manera en que requiero se vea, ya logre que se fuera al fondo, pero solo necesito que se valla sobre el contenido.



Espero me puedan ayudar! GRACIAS!!

Lo que te puedo sugerir es que hagas un Float para que la capa de la imagen flote encima de las demas...

el Float (significa Flotar en Español) te sirve para hacer flotar los objetos a los cuales les ordenas esta tecnica.Si le aplicas un "float:left;", este flotara a la izquierda, asi como puedes usar right (derecha) y none (ninguno).

Es usada de este modo:

Código :

.flotando_a_la_izquierda {
float : left  // En este caso flotarà a la izquierda
}

Saludos y me cuentas si te sirvio, !

Quarterback gracias por el tip, pero se lo agrege al estilo peor no funcion se sigue quedando de fondo

.art-sheet-body
{
background-image: url('images/fondo.png');
background-repeat: no-repeat;
background-position: left bottom;
position: relative;
z-index: 1;
padding: 3px;
float: left;
}

o tratar de insertar dos imagenes en el mismo estilo, una de fondo y otra de la siguiente manera

.art-sheet-body
{
background-image: url('images/fondo.png');
background-repeat: no-repeat;
background-position: left bottom;
position: relative;
z-index: 1;
padding: 3px;
img src: personas.png;
float: left;
}

Pero tampoco funciono, que podria hacer para que en el mismo estilo se manden a llamar ambas imagenes! la de personas sea la que venga al frente o como una sola, no importa!

Gracias por la atención!!

Momento....

Float es para flotar un elemento en la pagina, no un fondo.
Segundo: no puedes poner dos imagenes de fondo en un mismo elemento.

Si te das cuenta en tu propio codigo dice:

Código :

background-position: left bottom;

Donde "bottom" indica que la imagen se vaya abajo.

En realidad no entiendo que quieres hacer.

Gracias por aclarar mis dudas!! mira si te das cuenta en la ilustración que esta al principio del tema! la imagen que esta arriba del pie de pagina se compone de dos elementos, las franjas de color naranja y azul, y sobre ellas hay dos personas viendo al espacio!!!

tal como esta en la ilustración requiero que por medio de estilos sucedan dos cosas:

1.- que las franjas de colores se vallan de fondo en la pagina, eso ya lo hice sin problemas.

2.- lo mas complicado, que la imagen con las personas se mande a llamar pero por ensima de todos los elementos de la pagina, como se muestra en la ilustracion el rostro de ella, esta arriba de la caja de texto.

Ya tengo las dos imagenes por separado, son png transparentes, lo unico que se me ocurre con lo que me dices que no se puede hacer es que en un estilo esten la imagen con las franjas de fondo, y en otro estilo no se como el del pie de pagina, mande a llamar la imagen de las personas

Estoy en lo correcto teoricamente hablando???

Pues lo unico que s eme ocurre a mi, es que hagas un div aparte y le pongas el fondo de las personas, y lo posicionas absolutamente, con z-index para que quede arriba. Tendrias que ponerle un margen relativo al elemento contenedor (asumo que debe ser el pie de pagina) para que siempre quede alineado con este.

Código :

#div-personas {
position: absolute;
margin: -300px 0 0 0; /*lo que sea necesario para alinear*/
width: 300px; /*Ancho de la imagen */
height: 300px; /*Alto de la imagen*/
z-index:10;
}

Muchisimas gracias men, quedo de lujo, al final me sirvio para hacer algo mas, pero fue dentro de la misma pagina y para algo mas importante el logo!

Lo hice flotante sobre varios objetos!! estuvo genial tu ayuda, muchas gracias!!