Imagen de semitransparente sobre imagen background fijo.

tomuer01 · #1 (**permalink**) 20/08/2010, 20:24

Hola...

Nose si me explique bien pero les cuento...estoy haciendo una pagina web la cual le puse una imagen de fondo fijo, lo que necesito hacer es colocar el contenido de la pagina sobre otra imagen semitransparente que al mover el scroll se mueva solo la imagen semitransparente con el contenido de la web, la imagen backgraund se mantiene estatica...

Si alguien ha hecho esto o conoce como hacerlo que me ayude...Gracias.

cristian_cena · #2 (**permalink**) 20/08/2010, 23:01

Hola tomuer01, para la imágen del background usa background-attachment:fixed; y para la capa semitransparente puedes usar un png repetido. o bien con css usando dos capas apiladas con z-index (recuerda que para que z-index funcione debes tener posicionada tus capas hermanas en relative, absolute o fixed.). Donde la capa de adelante tiene el contenido y la de atrás el fondo transparente (ejemplo: filter: alpha(opacity=50) ).

Espero te sea útil, un saludo.

tomuer01 · #3 (**permalink**) 21/08/2010, 14:56

gracias por la respuesta...

Lo que necesito lograr es algo como esto

http://digitalmonsters.netne.net/index.php

pero la parte del fondo blanco que quede transparente...

Gracias...

cristian_cena · #4 (**permalink**) 21/08/2010, 20:08

Hola tomuer01, crea una imagen de 2px de alto por 2px de ancho en photoshop o en el editor de imágenes que ocupes. Luego dale el color de fondo y el grado de transparencia que necesites y guárdala como .png

Por último tomas la capa con css, supongamos que tienes un contenedor así:
<div id="content"></div>
.. y aplicas la imagen repetida como fondo para esa capa:
#content{
width:/*ancho de tu imagen*/;
height:/*alto de tu imagen*/;
background:url(ruta/imagen.png) repeat;
}

y listo, esto funcionará en todos los navegadores XD, saludos.

tomuer01 · #5 (**permalink**) 22/08/2010, 10:38

OK...Gracias nuevamente...

Duda el div <div id="content"></div>
va dentro del body sierto?
¿Dentro del div va el contenido de la pagina o no?
o simplemente agrego <div id="content"></div>en la primera linea dentro del body y nada mas?

cristian_cena · #6 (**permalink**) 22/08/2010, 13:12

Si, <div id="content"></div>, como todo contenido que desees incluir en un documento html va dentro de <body></body>

Para un correcto maquetado lo que se hace es crear contenedores en los que vamos incluyendo el contenido que necesitemos.

Por ejemplo: Una estructura común de ver sería:

<body>

<div id="contenedor">
<div id="cabecera">
<ul id="menu">
<li><a class="item" id="item1" href="#">item1</a></li>
<li><a class="item" id="itemN" href="#">item n</a></li>
</ul>
</div>
<div id="cuerpo">
<div id="columna_izquierda">... contenido de la columna izquierda ...</div>
<div id="columna_derecha">... contenido de la columna derecha...</div>
</div>
<div id="pie">... contenido del pie...</div>
</div>

</body>

... y en los estilos del head:

<head>
<style type="text/css">
#contenedor{margin:0 auto; /*con margin:0 auto; centras horizontalmente tu contenedor, en la próxima vemos como hacerlo para ie6 XD*/ width: ... ;}
#cabecera{}
#menu{}
#menu li {}
#menu li a{display:block; /*convertimos los <a> en etiquetas de bloque para poder darle altura , ancho, interlineado, etc.*/}
.item{}
#item1 {}
#itemN{}
#cuerpo{width: ... ; overflow:hidden; /*damos overflow:hidden; para limpiar los floats*/}
#columna_izquierda, #columna_derecha{float:left; flotamos las columnas, ten en cuenta que el ancho total de las columnas no debe superar el ancho de contenido de su padre contenedor, o sea el ancho de #cuerpo. /*[Ancho total = padding+margin+border+width] [Ancho del contenido = width]*/}
#columna_izquierda{width: ... ;}
#columna_derecha{width: ... ;}
#pie{}
</style>
</head>

... por último, lo que deberíamos haber hecho en primer lugar, debes declarar un dtd al principio de la página, antes de <head>.

Bueno, ya tu personalizarás un poco más esto, teniendo esto aprendido solo restaría que aprendas a trabajar con posicionamiento

Espero te sea útil, un saludo.

tomuer01 · #7 (**permalink**) 22/08/2010, 16:40

Muchas gracias por la guia y ayuda, cristian_cena

cristian_cena · #8 (**permalink**) 22/08/2010, 20:59

Por nada tomuer01, me alegro que te haya servido.

tomuer01 · #9 (**permalink**) 23/08/2010, 12:59

Una nueva consulta cristian_cena, la imagen semitransparente se ve muy bien, tengo la web ya casi lista pero me gustaria agregarle, para que se vea mucho mas atractiva, una sombra alrededor de todo el contenido de la web...la imagen semitransparente de la pagina con sombra.

Gracias...

cristian_cena · #10 (**permalink**) 23/08/2010, 18:54

Hola tomuer puedes usar la propiedad css3 box-shadow, la cual no es soportada aún por todos los navegadores. O como alternativa a esto puedes anidar cajas flotadas a la caja que desees sombrear, eso si, necesitaras 5 cajas más de la que tienes.
O sea:

<div id="papi">
<div id="top"></div>
<div id="left"></div>
<div id="center">... aqui el contenido... </div>
<div id="right"></div>
<div id="bottom"></div>
</div>

#papi{overflow:hidden;}
#left, #center, #right{ float:left; }
#papi, #top, #bottom{width:100px;}
#top{background-image:url(...imagen...);}
#bottom{background-image:url(...imagen...);}
#left{background-image:url(...imagen...); width:/*ancho de tu borde izquierdo p.ej:3px*/;}
#center{background-image:url(...imagen...); width:94px;}
#right{background-image:url(...imagen...); width:3px;}

y luego dar los background-image necesarios para cada caja, en donde incluirás los pedazos de sombra que hallas previamente cortado en un editor de imagenes como por ejemplo photoshop.

Este ejemplo puede serte util en cajas de alto variable digamos (que crecen con el contenido que vallas incluyendo)

Si, en cambio el destino de tu caja sombreada es ser de alto fijo digamos, (por ejemplo nose, 100px y que ya no crezca más de ahi)
entonces puedes usar dos cajas menos:

<div id="papi">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>

... ah, y algo muy util y funcional, usar sprites css para las imagenes, esta aplicación es la que uso yo para generar sprites:

#papi{width:; height:; overflow:hidden;}
#left, #center, #right{ float:left; background:(sprite.xxx) no-repeat;}
#papi, #top, #bottom{width:100px;}
#left{ width:; height:; background-position: ... posicion de la imagen para el borde izquierdo... ;}
#center{
width:; height:;
background-position: ... posicion de la imagen para el centro,esta imagen debe poseer el borde superior e inferior... ;
background-repeat:repeat-x; ya que repetimos la imagen en x y generamos el efecto
}
#right{ width:; height:; background-position: ... posicion de la imagen para el borde derecho... ;;}

Cuando crees el sprite hazlo de modo que tenga esta forma:
|_
|_| 1
|_| 2
|_| 3

1 = borde izquierdo
2= imagen para el centro que repetimos en x, aca incluí los bordes top y bottom.
3 = borde derecho

Bueno, espero haberme explicado, ya sabes, si tienes alguna duda nada más pregunta y vemos.

Un saludo.