degradado laterales web

[jhz1983]

buenas estoy intentando poner unos degradados en los laterales de una página y tengo algunos problemas.. tengo 2 archivos de 1px x 300px con un degradado para cada lateral.. la cosa es que puedo colocar uno con este código:

Código:

background-image:url(degradado.png);
	background-position:left;
	background-repeat:repeat-y;

pero no puedo poner el otro lateral al hacerlo de esta manera alguien sabe como he de hacerlo exactamente ..

os dejo un link de como queda:

[RafaRG]

prueba a poner este código para el segundo degradado:

Código PHP:

  background-image:url(degradado2.png);
position:fixed; top:0px; right:0px;
background-repeat:repeat-y; 
   

[ZoroRoronoa]

Iniciado por RafaRG

prueba a poner este código para el segundo degradado:

Código PHP:

  background-image:url(degradado2.png);
position:fixed; top:0px; right:0px;
background-repeat:repeat-y; 
   

y si el monitor es de una res mas chica?
taparia el contenido...

Eso no se puede de esa manera, hay que usar algunas tacticas para lograr el mismo objetivo o al menos
aparentar haber logrado lo que queriamos.

[jhz1983]

no funciona .. a la que pongo un background-image:url(xxx) repetido me usa el último introducido .. asi que supongo que tendre que buscar otra manera.. he pensado en usar divs y usar 2 imagenes lo que pasa es que no podre usar el repeat-y y las imagenes pesaran bastante más .. alguna solución?

[Hazuki]

Tal vez este artículo te ayude:
http://www.css3.info/preview/multiple-backgrounds/

[DrFaust]

Implementar lo que vos querés es tan simple como utilizar tres divs posicionados de forma absoluta: dos de ellos que ocupan el 50% del ancho y el 100% del alto, uno alineado a la izquierda y el otro a la derecha, donde van los fondos. El tercero, por encima de los otros dos, con overflow:auto, donde va el contenido.

Acá tenés un ejemplo:

http://www.leandrobarone.com.ar/forosdelweb/3987130/

[Tedel]

Usa el fondo al centro con el contenido al centro y de ancho fijo.

Debería resultar.

[RafaRG]

para evitar usar imágenes como degradado, podrías hacerlo mejor como un div con fondo degradado. si no sabes hacerlo, en esta página puedes hacer fondos degradados a tu gusto: http://www.colorzilla.com/gradient-editor/. el código generado (es un background), lo pegas en el css correspondiente.
en cuanto a posicionarlos, la idea de DrFaust es muy acertada. aunque yo pondría los tres div en el mismo plano de la siguiente manera:

Código PHP:

  <style type="text/css">
#degradadoizquierdo {
     position:absolute; top:0px; left:0px;
     width:10%;
     height:100%;
     background...; //aquí va el degradado izquierdo
     }
#degradadoderecho {
     position:absolute; top:0px; right:0px;
     width:10%;
     height:100%;
     background...; //aquí va el degradado derecho
     }
#contenidopágina {
     position:absolute;top:0px; left:10%;
     width:80%;
     height:100%;
     }
</style>
<div id="degradadoizquierdo"></div>
<div id="degradadoderecho"></div>
<div id="contenidopágina"></div> 
   

con esto se soluciona el problema de la resolución que comentaba ZoroRoronoa y tiene que funcionar sí o sí XD

[jhz1983]

gracias a todos , muy útil todo el material que me han puesto ;D