Hola de nuevo, hoy os enseñaré a como poner una imagen de fondo en nuestra web y que ésta sea adaptable a nuestro monitor y al zoom de nuestro navegador web.
Un ejemplo real lo tenemos en esta web http://taperiajoseluis.com/, como observamos la imagen de fondo se adapta siempre a nuestro monitor aunque quitemos o aumentemos zoom.
En primer lugar hay que asegurarse de que la imagen a utilizar tenga una buena resolución y calidad.
Después de nuestro <BODY> añadimos el siguiente código:
<img id="bg" alt="Fondo de pantalla" src="ruta_de_nuestra_imagen/fondo_pantalla.jpg" />
Esta será nuestra imagen de fondo adaptable le he puesto el atributo id a “bg” para más tarde hacer el selector con jQuery y aplicar los correspondientes estilos en css.
Creamos el siguiente código css, bien en nuestros archivos css incluidos o en el propio html.
#bg { position: fixed; top: 0; left: 0; }
#bg.bgwidth { width: 100%; }
#bg.bgheight { height: 100%; }
Vamos a crear el siguiente código jQuery, para que quede más ordenado aconsejo crear un archivo llamada por ejemplo “background_adaptable.js” e incluirlo en nuestro html principal.
Lo que vamos a conseguir con este código jQuery es que cada vez que aumentemos o disminuyamos zoom se llame a la funcion “resizeBg()” la cual se encarga de ajustar nuestra imagen de fondo a nuestro monitor.
$(document).ready(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ((theWindow.width() / theWindow.height()) < aspectRatio)
{
$bg.removeClass().addClass('bgheight');
} else {
$bg.removeClass().addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
Si ves que no funciona asegúrate de que antes hayas incluido la librería de jQuery -> Web jQuery
<< Post Anterior | Post Siguiente >>Imagen Background adaptable a monitor (CSS, JQUERY) fue posteado el octubre 11, 2013 a las 7:05 en CSS, Javascript y. fue modificado el octubre 11, 2013 at 7:09. Puedes seguir cualquier respuesta a esta entrada a través de la RSS 2.0 feed. Puedes dejar una respuesta o hacer un trackback desde tu web.
6 Comments
Javier Honda on 10/29/2013 at 11:16.
Por fin encuentro lo de insertar la imagen explicado de forma sencilla, muchas gracias. Yo no se mucho de esto y me has ayudado un montón
dul on 02/05/2014 at 5:48.
muchas gracias
Mariana on 02/15/2014 at 17:42.
Hola buenas!!
estuve haciendo lo que pusiste en el texto,, para el tema del fondo, pero a mi no se me ve la pagina, es como si la tapara, me podrias ayudar?? lo necesito para entregar algo.
David Nieves Coronado on 02/17/2014 at 7:26.
Hola Mariana,
Puede ser por muchas cosas, pásame si quieres el enlace de tu web y le echo un vistazo rápido. Saludos y gracias!
Mariana on 02/17/2014 at 22:48.
Hola David, gracias por responder!
Te paso el link a ver si me podes ayudar, seria muy importante para mi
http://u-efi.com.ar/inicio-3.html
cualquier sino decime por mail, gracias
Andrés on 02/18/2014 at 19:15.
Si trabajas con html5 puedes probar con estas propiedades para la etiqueta body {
background-image: url(/imagenes/fondo.jpg);
background-size:cover;
}