background-repeat y background-position a la vez

MaNuL0 #1 Jun '09

Tengo este codigo

HTML:

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

CSS:

.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.

guner #2 Jun '09

Necesitas anidar esos divs?

bLaKnI #3 Jun '09 Inocente

Primero:

El top, esta dentro del bottom. Mande!? En caso de así quererlo, no tiene logica lo que pides.

Segundo:

Reestructura las cosas. Si solo quieres fondo en determinados puntos, crea divs para ello. Vacios, con tamaño concreto por ejemplo, pero con fondo.

Tercero:

Abre la imagen de fondo X en photoshop, crea una capa trasera, y pintala del color que quisieras en la web. Se acabo el problema de transparencias...

No se, hay mil cosas por hacer!

Pon un esquema de lo que quieres conseguir, porque no entiendo bien que pretendes. Y parte de ello es consecuencia de la incongruencia de los nombres de los divs. Que me hacen pensar en un elemento inferior centrado, pero en la parte superior de este... :\

NeB1 #4 Jun '09

nuse, pero lo que buscas sería esto, no?

<div id="top">
  <img src="./img/top.png">
</div>
<div id="center">
  [CONTENIDO]
</div>
<div id="bottom">
  <img src="./img/bottom.png">
</div>


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

no sé si he captado la idea pero... esto sería ideal para dibujar un cuadrado donde la parte superior y inferior es un dibujo molón, y el centro se expande según el contenido

Usuarios habituales