Imprimir Página - Imagen de fondo dinámica [SOLUCIONADO]

Título: Imagen de fondo dinámica [SOLUCIONADO]
Publicado por: novalida en 22 Noviembre 2010, 22:51 pm

Hola un saludo a todos y muy buenas!!!
Quiero meter como fondo para una web una imagen que ocupe el tamaño de la pantalla sin ninguna repetición, ni en X ni en Y, independientemente de la configuración de pantalla (1024x768, 1280x800, etc.), es decir, que la imagen se ajuste al tamaño de la definición del monitor.
He estado leyendo y encontré para CSS 3 el estilo background-size, pero como no lo acepta por el momento casi ningún navegador, declino dicha opción.
Alguién conoce alguna manera para poder ajustar la imagen de fondo de una web al tamaño de la definición del monitor???

Un saludo y muchas gracias por adelantado por la ayuda :)

PD: ME gustaría que el fondo fuese fijo, pues queda habilitado background-attachment: fixed

Título: Re: Imagen de fondo dinámica
Publicado por: madpitbull_99 en 22 Noviembre 2010, 23:26 pm

Te dejo unos enlaces sobre como hacerlo, a parte de CSS también se puede usar JQuery:

Perfect Full Page Background Image (http://css-tricks.com/perfect-full-page-background-image/)
Easy Full Screen Background Images with jQuery (http://srobbin.com/blog/easy-full-screen-background-images-with-jquery/)
Fullscreen background image (not flash) (http://www.sitepoint.com/forums/showthread.php?t=552791)
Effortless Full Screen Background Images With jQuery (http://designshack.co.uk/articles/javascript/effortless-full-screen-background-images-with-jquery)
Fullscreenr - lightweight full screen background plugin (http://plugins.jquery.com/project/fullscreenr)
fsOverlay plugin (http://plugins.jquery.com/project/fsoverlay)
How To: Resizeable Background Image (http://css-tricks.com/how-to-resizeable-background-image/)

Te recomiendo usar JQuery para hacerlo. Otra posibilidad serian las "expresiones css"

Un saludo!

Título: Re: Imagen de fondo dinámica
Publicado por: novalida en 23 Noviembre 2010, 00:56 am

Hola, gracias por contestar tan rápido.
Intenté por CSS y no conseguí nada porque "temía" usar JQuery dado que nunca lo he utilizado.
Al final me decanté por tu recomendación y todo ha funcionado perfecto.
Incluyo el código por si puede ayudar a alguien:

Código:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="BackStretch/jquery.backstretch.min.js"></script>
<script type="text/javascript">
        $.backstretch("imagenes/fondos/fondo.jpg", {speed: 150});
</script>

Muchas gracias por la respuesta :)

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: novalida en 22 Noviembre 2010, 22:51 pm