Una imagen de fondo arriba y abajo ¿Es posible?

[neoarcangel]

Fijaos en esta pagina
http://www.csszengarden.com/?cssfile=184/184.css

Como veis tiene un degradado de color de fondo en lo alto de la pagina para de verde a blanco. Yo lo que quiero es aplicar el mismo degradado de forma inversa en el fondo también, es decir dos degradados, que seria el mismo pero volteado horizontalmente con photoshop, pero por lo visto solo puedes poner un fondo, asi que me preguntaba si existe algun sistema para poder poner 2 fondos y no una imagen tan grande como la pagina.

Y otra cosa, en esta pagina
http://www.csszengarden.com/?cssfile=196/196.css
veis que los bordes de la tabla estan como con sombra....puedo entender como se hacen los lados pero que el fondo quede tan acoplado a los lados no lo entiendo
¿me podeis explicar como se hace?

Gracias.

[daPhyre]

Una técnica popular para hacer los dos degradados, es poner todo el contenido en un div contenedor que ocupe el 100% de ancho y alto. Luego, poner el degradado 1 al body y el degradado 2 a este div (Incluso se quienes lo han aplicado a las etiquetas HTML y BODY, pero no puedo asegurar que funcionen, ya que no le he probado).

Del segundo, no he revisado el código, peor es muy probable que lo haga con divs extras que simulen el efecto, sería cuestión de estudiar un poco el código. Saludos y mucha suerte.

Edición: Los encontré. Revisa el CSS (http://www.csszengarden.com/196/196.css), verás que en los Div #container y #extraDiv1, usa de fondo respectivamente las dos imágenes (http://www.csszengarden.com/196/bg.gif y http://www.csszengarden.com/196/bottom.gif) que hacen este efecto. Espero te sirvan de ayuda. Mucha suerte

[LuisdaviD]

En el CSS puedes encontrar las dos imagenes que usa como fondo:

Esta es la imagen de arriba: http://www.csszengarden.com/196/header.jpg
#pageHeader {
position:relative;
width:781px;
height:245px;
margin:0 auto;
background:url(header.jpg) no-repeat right;
}

Y esta es la que le da forma de hoja: http://www.csszengarden.com/196/bg.gif
#container {
position:relative;
width:781px;
left:50%;
margin-left:-390px;
background:#fff url(bg.gif) repeat-y center;
overflow:auto;
z-index:100;
}

Como puedes ver la segunda es un corte que le hicieron a la parte baja de la primera.

Saludos.