Foros del Web » Creando para Internet » CSS »

Una imagen de fondo arriba y abajo ¿Es posible?

Estas en el tema de Una imagen de fondo arriba y abajo ¿Es posible? en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 26/01/2010, 09:37
Avatar de neoarcangel  
Fecha de Ingreso: enero-2005
Ubicación: España
Mensajes: 566
Antigüedad: 12 años, 10 meses
Puntos: 5
Una imagen de fondo arriba y abajo ¿Es posible?

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.
__________________
Mi equipo

Gigabyte GA-MA770T-UD3P Socket AM3|OZC StealthxStream 600 w | Gigabyte Radeon HD 4770 512MB GDDR5| AMD Phenom II 945 X4 Quad Core 3.0Ghz| Memoria Kingston 6GB DDR3 1333
  #2 (permalink)  
Antiguo 26/01/2010, 13:47
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Una imagen de fondo arriba y abajo ¿Es posible?

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Última edición por daPhyre; 26/01/2010 a las 13:53
  #3 (permalink)  
Antiguo 26/01/2010, 17:00
Avatar de LuisdaviD  
Fecha de Ingreso: octubre-2006
Mensajes: 74
Antigüedad: 11 años, 1 mes
Puntos: 2
Respuesta: Una imagen de fondo arriba y abajo ¿Es posible?

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.

Etiquetas: abajo, arriba, fondo, posible
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 23:51.