¿Div con doble background? Pero con alfa

hey_alan · #1 (**permalink**) 12/06/2009, 20:24

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>

¿Alguien tiene una idea?

braulito · #2 (**permalink**) 12/06/2009, 23:18

Podrías simplemente el div principal ponerle esto:

Código:

#divconfondo {
   background: #530d8e url('tuimagen.png') repeat-x;
}

Lo que sucederá es que este div siempre será de color #530d8e y tuimagen.png es la imagen del gradiente de negro a morado, y al terminar el gradiente se mostrará el color de fondo del hexadecimal, y tu contenido podrá estar dentro de este div sin aumentar otros más.

Si te entendí bien esa sería la solución mas factible.

Saludos

kseso? · #3 (**permalink**) 13/06/2009, 04:15

Hola Hey_Alan
No se si he comprendido bien tu idea. Mira a ver si es lo siguiente:

Código css:

Ver original* {margin: 0; padding: 0; position: relative;}
#bg_top {
background:transparent url(tu_degradado.png) repeat-x;
height:Xpx;/*lo que tenga tu imagen de altura*/
position:absolute;
width:100&#37;;/* el valor es cien por cien, pero el tag cambia el símbolo de porcentaje por su "html entity"*/
}
 
#bg_main {
background:transparent url(tu_imagen) ...;
margin:0 auto;
width:/*tu anchura*/;
}

Código html:

Ver original<body>
<div id="bg_main">
<div id="bg_top"></div>
<!-- aquí toda tu página -->
</div>
</body>

Si no es, ya dirías.
Un saludo

hey_alan · #4 (**permalink**) 13/06/2009, 10:42

Gracias por sus respuestas.

En realidad lo que busco es algo similar a lo que propone braulito, sin embargo, como dije antes, los png tienen alpha y la opacidad de los fondos se sumaría creando el resultado no deseado.

La imagen del BG-MAIN es un png de 1x1 con un alpha del 80% para que sepan a lo que me refiero.

kseso?: Oh disculpa si no me di a entender bien, pero no comprendo el método que propones. De cualquier manera lo apliqué y no me funcionó.

Lo que quiero es que el background que se repite comience JUSTO después del de degadado.

Saludos.