Blog


11
octubre
- 2013 -
David Nieves Coronado

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.

1.- Creando la imagen background en HTML

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.

2.- Creando el código 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%; }

3.- Creando el código jQuery

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 funcionresizeBg()” 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

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.

Compartir: Twitter, Facebook, Delicious, Digg, Reddit

|

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

Responder

dul on 02/05/2014 at 5:48.

muchas gracias :)

Responder

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.

Responder

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!

Responder

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

Responder

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;
}

Responder

Deja tu comentario

Tranquilo, tu email no será publicado o compartido.
Rellena los campos obligatorios marcados con *


*

Puedes utilizar etiquetas HTML con sus correspondientes atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>