background-repeat y background-position a la vez

[choosein]

Tengo este codigo

HTML:

Código:

<div class="center">
	<div class="bottom">
		<div class="top">
		</div>
	</div>
</div>

CSS:

Código:

.top
{
	background-image:url("../img/top.png");
	background-position: top;
	background-repeat: no-repeat;
}

.bottom
{
	background-image:url("../img/bottom.png");
	background-position: bottom;
	background-repeat: no-repeat;
}

.center
{
	background-image:url("../img/center.png");
	background-repeat: repeat-y;
}

Mi problema esta en que las imagenes de background tienen transparencias y eso hace que a traves del div top y el div bottom se vea el background del div center que se repite en todo el div.
Lo que quiero saber es si existe alguna forma de utilizar el background-position para hacer que el fondo del div center empiece cuando acaba el top y termine justo antes de que empiece el bottom, o si hay alguna otra forma de hacer esto.

[kseso?]

.center { background-image:url("../img/center.png") no-repeat 10px 15px;}

El primer valor el desplazamiento en la horizontal y el segundo en la vertical.
Admite valores en px, %, em... aparte de top || left || bottom || right

Pero si lo repites en una coordenada, el valor será 0 en ella.

Un saludo

[choosein]

Gracias pero creo que no me has entendido del todo. A ver si me explico.
Yo tengo un div de n pixeles de alto, con un background-repeat:repeat-y que obviamente hace que se repita en ese div desde arriba hasta abajo.
Lo que quiero hacer es que ese background empiece a repetirse desde el pixel 20 empezando por arriba y pare de repetirse en el pixel n-15.
Digamos que busco una especie de padding-top y padding-bottom pero para el background.

[kseso?]

Para el pixel 20 empezando por arriba:
"Pero si lo repites en una coordenada, el valor será 0 en ella."
Para pararlo en el pixel -15:
Tampoco.

Creo que tendrás que crear un contenedor para alojar ese fondo, posicionarlo "absolute" respecto y con z-index colocarlo "debajo.

Un saludo

[choosein]

Entonces de que manera puedo hacer un bloque con los bordes redondeados y sombras, que autoincremente su altura en relacion con su contenido?

[kseso?]

La sombra, con un editor de imágenes.
Esquinas redondeadas: "curved corners"
Para que su tamaño esté en función de su contenido: na darle medida en el sentido que quieras que crezca (no te olvides de añadirle un "oveflow" si todo su contenido está con "float")

[Mikmoro]

Iniciado por choosein

Entonces de que manera puedo hacer un bloque con los bordes redondeados y sombras, que autoincremente su altura en relacion con su contenido?

Quizá esta pueda ser una manera

[choosein]

Gracias a los dos por responder. A ver si con una captura me explico mejor(Quitad el espacio de http que no puedo poner links).

ht tp://img14.imageshack.us/img14/9864/sinttulo2yyv.png

El codigo es en el primer mensaje.

Me explico. Son 3 divs del mismo tamaño uno encima de otro. Lo que esta marcado con las llaves es la posicion de los backgrounds en cada div.

El problema lo tengo en que , al ser todos los divs del mismo tamaño el background del center que esta por detras de los otros dos, mezcla su sombra con la de las otros backgrounds. Y como no puedo hacer mas pequeño ese div sin encoger tambien a los otros dos queria saber si hay alguna forma de hacer que el background de ese div no coincida con los otros.