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
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!
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:
<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 :)