Foros del Web » Creando para Internet » CSS »

¿Div con doble background? Pero con alfa

Estas en el tema de ¿Div con doble background? Pero con alfa en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 12/06/2009, 21:24
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
¿Div con doble background? Pero con alfa

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?
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #2 (permalink)  
Antiguo 13/06/2009, 00:18
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
Respuesta: ¿Div con doble background? Pero con alfa

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
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #3 (permalink)  
Antiguo 13/06/2009, 05:15
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Div con doble background? Pero con alfa

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

Código css:
Ver original
  1. * {margin: 0; padding: 0; position: relative;}
  2. #bg_top {
  3. background:transparent url(tu_degradado.png) repeat-x;
  4. height:Xpx;/*lo que tenga tu imagen de altura*/
  5. position:absolute;
  6. width:100&#37;;/* el valor es cien por cien, pero el tag cambia el símbolo de porcentaje por su "html entity"*/
  7. }
  8.  
  9. #bg_main {
  10. background:transparent url(tu_imagen) ...;
  11. margin:0 auto;
  12. width:/*tu anchura*/;
  13. }

Código html:
Ver original
  1. <div id="bg_main">
  2. <div id="bg_top"></div>
  3. <!-- aquí toda tu página -->
  4. </div>
  5. </body>

Si no es, ya dirías.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 13/06/2009 a las 10:57
  #4 (permalink)  
Antiguo 13/06/2009, 11:42
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: ¿Div con doble background? Pero con alfa

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.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:32.