Hola a todos.
El título suena absurdo sin embargo me parece ser el más descriptivo a mi caso.
Bien, quiero que observen la siguiente estructura:
En realidad tengo un div contenedor.
Lo que quisiera es que ese div tuviera un fondo de un gradiente negro->morado, y cuando se termine el degradado el resto del div continúe del color morado.
Entonces lo que habría que hacer es separarlo en dos divs: Uno que contenga el gradiente (div
#BG-TOP) y la otra con el color morado de fondo (div
#BG-MAIN).
Bien... dentro del #BG-MAIN entonces vendría la div del contenido.
El problema es que deja el espacio vacío del div superior (div #BG-TOP) donde quisiera que ahí comenzara el contenido.
¿Qué hacer entonces?
Antes lo que me funcionaba era poner el div #BG-TOP dentro del div #BG-MAIN y dentro de ese a su vez el del contenido. De esa manera como el #BG-TOP sólo se repite horizontalmente, cuando este se termine se verá el otro #BG-MAIN (el color morado repetido).
En este caso eso es inservible pues ambas imágenes de background son PNGs con opacidad y hacer eso sobrepondría los colores.
Hasta el momento lo único que se me ha ocurrido es que a la div del contenido (div #contenido) la he puesto en "position:relative" con un valor de "top:-255px" (que es la altura del png del degradado).
El problema es que esto hace ahora que se quede un espacio vacío inservible en el div #BG-MAIN.
CSS:
Código:
#contenedor{width:700px; margin:auto;}
#contenido-bgtop{background: url(bgmaintop.png) repeat-x; height:255px; margin:0;}
#contenido-bgmain{background: url(bgmain.png); margin:0;}
#contenido{ position:relative; top:-240px;}
HTML:
Código:
<div id="contenedor">
<div id="contenido-bgtop"></div>
<div id="contenido-bgmain">
<div id="contenido">
<p style="margin-top:0;">afasd
sdsadasfafas</p>
<p>fasf</p>
<p>as</p>
<p>fas</p>
<p>fas</p>
<p>f</p>
<p>asf</p>
<p>as</p>
<p style="margin-bottom:0;">f</p>
</div>
</div>
</div>