Comentarios en: Cómo hacer una imagen de fondo escalable con CSS http://www.todotutoriales.es/2009/10/20/hacer-escalable-una-imagen-de-fondo-con-css/ Los mejores tutoriales gratis en español Fri, 03 Feb 2012 22:22:03 +0000 hourly 1 http://wordpress.org/?v=3.3.1 Por: todotuto http://www.todotutoriales.es/2009/10/20/hacer-escalable-una-imagen-de-fondo-con-css/#comment-1899 todotuto Fri, 14 Oct 2011 02:10:50 +0000 http://www.todotutoriales.es/?p=2928#comment-1899 Gerardo revisa la ruta que has puesto en el html. Si no encuentra la imagen es porque la ruta debe ser incorrecta, supongo. Gerardo revisa la ruta que has puesto en el html. Si no encuentra la imagen es porque la ruta debe ser incorrecta, supongo.

]]> Por: Gerardo http://www.todotutoriales.es/2009/10/20/hacer-escalable-una-imagen-de-fondo-con-css/#comment-1898 Gerardo Thu, 13 Oct 2011 23:10:28 +0000 http://www.todotutoriales.es/?p=2928#comment-1898 GRACIASSSS!! PERO TENGO UN PROBLEMILLA.... La imagen se ve muy bien en Dreamweaver, pero cuando lo publico en el navegador no se veeee!!!!!! queda como una imagen que no encuentra! Podrian decirme el porqué?? Esto es lo que tengo: <!-- .style1 { color: #FFFFFF; font-family: Geneva, Arial, Helvetica, sans-serif; } .style3 { color: #FF0000; font-family: Geneva, Arial, Helvetica, sans-serif; } .style5 {font-size: 35px; font-style: normal; font-weight: normal; text-align: left; font-family: "HelveticaNeue LT 57 Cn";} a:link { text-decoration: none; color: #666666; } a:visited { text-decoration: none; } a:hover { text-decoration: none; color: #999999; } a:active { text-decoration: none; } #fondo {width:100%; position: absolute; z-index: -1; top: 0; left:0;} Esperare la respuesta. GRACIAS!!! GRACIASSSS!!
PERO TENGO UN PROBLEMILLA….
La imagen se ve muy bien en Dreamweaver, pero cuando lo publico en el navegador no se veeee!!!!!! queda como una imagen que no encuentra!

Podrian decirme el porqué??

Esto es lo que tengo:

<!–
.style1 {
color: #FFFFFF;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.style3 {
color: #FF0000;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.style5 {font-size: 35px; font-style: normal; font-weight: normal; text-align: left; font-family: "HelveticaNeue LT 57 Cn";}
a:link {
text-decoration: none;
color: #666666;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #999999;
}
a:active {
text-decoration: none;
}

#fondo {width:100%; position: absolute; z-index: -1; top: 0; left:0;}

Esperare la respuesta. GRACIAS!!!

]]> Por: zanguanga http://www.todotutoriales.es/2009/10/20/hacer-escalable-una-imagen-de-fondo-con-css/#comment-931 zanguanga Sat, 18 Dec 2010 11:06:00 +0000 http://www.todotutoriales.es/?p=2928#comment-931 @Ernesto este tutorial no te sirve para crear sliders de fondo, necesitaras un script. Aquí estamos tratando de puro CSS. @Lebi supongo que se te crea un scroll vertical cuando usas las versiones no deformadas, porque estás forzando el ancho al 100% y quizá no quepa el alto de la imagen en la ventana, por las proporciones que tiene. Si fuerzas el alto en lugar del ancho, el scroll vertical debería desaparecerte. @Ernesto este tutorial no te sirve para crear sliders de fondo, necesitaras un script. Aquí estamos tratando de puro CSS.

@Lebi supongo que se te crea un scroll vertical cuando usas las versiones no deformadas, porque estás forzando el ancho al 100% y quizá no quepa el alto de la imagen en la ventana, por las proporciones que tiene. Si fuerzas el alto en lugar del ancho, el scroll vertical debería desaparecerte.

]]> Por: Lebi http://www.todotutoriales.es/2009/10/20/hacer-escalable-una-imagen-de-fondo-con-css/#comment-930 Lebi Tue, 07 Dec 2010 00:35:40 +0000 http://www.todotutoriales.es/?p=2928#comment-930 mil gracias de verdd me salvaste de una!!! una preguntica por que se me crea un scroll para baja? mil gracias de verdd me salvaste de una!!!
una preguntica por que se me crea un scroll para baja?

]]> Por: Ernesto http://www.todotutoriales.es/2009/10/20/hacer-escalable-una-imagen-de-fondo-con-css/#comment-929 Ernesto Thu, 11 Nov 2010 23:08:59 +0000 http://www.todotutoriales.es/?p=2928#comment-929 Buen tutorial, una pregunta podría con este ejemplo hacer un efecto slider de imagenes que vayan rotando con efecto de trancicion? y que al mismo tiempo tengan el fondo a un 100% ? Buen tutorial, una pregunta podría con este ejemplo hacer un efecto slider de imagenes que vayan rotando con efecto de trancicion? y que al mismo tiempo tengan el fondo a un 100% ?

]]> Por: Yeisson http://www.todotutoriales.es/2009/10/20/hacer-escalable-una-imagen-de-fondo-con-css/#comment-928 Yeisson Sat, 18 Sep 2010 15:02:57 +0000 http://www.todotutoriales.es/?p=2928#comment-928 parcero mil gracias.... este me funciono de maravilla.... llevaba restos tratando de solucionar mi problema del fondo de pagina al 100% 100 puntos a este tuto parcero mil gracias…. este me funciono de maravilla…. llevaba restos tratando de solucionar mi problema del fondo de pagina al 100%
100 puntos a este tuto

]]> Por: zanguanga http://www.todotutoriales.es/2009/10/20/hacer-escalable-una-imagen-de-fondo-con-css/#comment-927 zanguanga Tue, 25 May 2010 18:10:44 +0000 http://www.todotutoriales.es/?p=2928#comment-927 Hola Eduardo, gracias por comentar. Estamos hablando de fondos de página, aunque la técnica es aplicable al fondo de cualquier elemento como el header. Si no notas variación al eliminar el "style" es porque seguramente no has creado más elementos en la página además de la imagen. El estilo, lógicamente es mejor escribirlo en la hoja de estilos en cascada (CSS), separado del contenido. El problema es que en la hoja de estilos no puedes resolver la escalabilidad de la imagen de fondo con la propiedad "background", por eso la imagen va en el HTML y las propiedades del fondo en el CSS ;) Hola Eduardo, gracias por comentar.

Estamos hablando de fondos de página, aunque la técnica es aplicable al fondo de cualquier elemento como el header.

Si no notas variación al eliminar el “style” es porque seguramente no has creado más elementos en la página además de la imagen.

El estilo, lógicamente es mejor escribirlo en la hoja de estilos en cascada (CSS), separado del contenido. El problema es que en la hoja de estilos no puedes resolver la escalabilidad de la imagen de fondo con la propiedad “background”, por eso la imagen va en el HTML y las propiedades del fondo en el CSS ;)

]]> Por: Eduardo http://www.todotutoriales.es/2009/10/20/hacer-escalable-una-imagen-de-fondo-con-css/#comment-926 Eduardo Mon, 24 May 2010 17:38:27 +0000 http://www.todotutoriales.es/?p=2928#comment-926 Pues a mi me queda como una imagen y no como fondo, de forma que si quito el código de head (style) aparece igual. La idea es tener un header escalable de fondo independiente del contenido. ¿No te parece? Pues a mi me queda como una imagen y no como fondo, de forma que si quito el código de head (style) aparece igual.
La idea es tener un header escalable de fondo independiente del contenido. ¿No te parece?

]]> Por: zanguanga http://www.todotutoriales.es/2009/10/20/hacer-escalable-una-imagen-de-fondo-con-css/#comment-925 zanguanga Mon, 07 Dec 2009 00:05:06 +0000 http://www.todotutoriales.es/?p=2928#comment-925 Gracias por avisar Jcl, tienes toda la razón, o ambos "background" o ambos "fondo" (ha sido un lapsus), corregido ;) Gracias por avisar Jcl, tienes toda la razón, o ambos “background” o ambos “fondo” (ha sido un lapsus), corregido ;)

]]> Por: Jcl http://www.todotutoriales.es/2009/10/20/hacer-escalable-una-imagen-de-fondo-con-css/#comment-924 Jcl Sat, 05 Dec 2009 11:40:06 +0000 http://www.todotutoriales.es/?p=2928#comment-924 Me imagino, que o bien quieres poner de id "background", o bien en el CSS el selector sería "#fondo"... si no, aunque no lo he probado, no veo cómo puede aplicarse ese estilo a esa imagen. Me imagino, que o bien quieres poner de id “background”, o bien en el CSS el selector sería “#fondo”… si no, aunque no lo he probado, no veo cómo puede aplicarse ese estilo a esa imagen.

]]>