Como hacer que la imagen de fondo se adapte al tamaño de la pantalla con CSS3

Puede ser interesante para nuestro diseño web y sobretodo si queremos hacer páginas multiplataforma que se adapten al tamaño de pantalla de los distintos dispositivos (diseño web adaptativo) poner una imagen de fondo que se adapte al tamaño y resolución de la pantalla del usuario.

La propiedad “background-size: cover” nos permite aumentar el tamaño de la imagen de fondo, en lugar de que nos muestre la imagen varias veces.

Para ello, solo debemos utilizar la siguiente instrucción CSS:

body{
background: url(imagen.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Con estos parámetros la función será válida para todos los navegadores (Cross-browsing)

¿Práctico no? Adiós al Javascript para hacer este tipo de cosas, es lo bueno que tiene el CSS3

Esta entrada fue publicada en Diseño web adaptativo, Web multiplataforma y clasificada en , , , , , , . Guarda el enlace permanente. Publica un comentario o deja un trackback: URL del Trackback.

23 Comentarios

  1. Silvia
    Publicado: 31 octubre, 2012 a las 20:06 | Permalink

    Fantástico!!!!!!

  2. Publicado: 7 agosto, 2014 a las 18:49 | Permalink

    Eres un crack, me vino como anillo al dedo, Gracias

  3. zamorabrush
    Publicado: 19 septiembre, 2014 a las 17:26 | Permalink

    de lujo!!!!!!

  4. Daniel
    Publicado: 21 agosto, 2015 a las 22:19 | Permalink

    Funciona perfecto, Gracias :)

  5. Publicado: 25 agosto, 2015 a las 22:24 | Permalink

    Este “truco” lo use en mi blog pero se adapta para la visualización desde el móvil, ¿se puede arreglar de alguna forma?

  6. Publicado: 26 agosto, 2015 a las 21:32 | Permalink

    Perdón, quise decir que NO se adapta a la version movil :/

  7. daniel el chido
    Publicado: 8 febrero, 2016 a las 1:37 | Permalink

    Muchas gracias, fue de mucha ayuda

  8. Publicado: 29 febrero, 2016 a las 19:03 | Permalink

    Funciona 100% bien ;) )

    Muchas Gracias por tus pequeños trucos porque mejoran las páginas web…

    Saludos desde Barcelona!!!

  9. jose romero
    Publicado: 20 marzo, 2016 a las 6:30 | Permalink

    Increible amigo, me estaba rompiendo el coco tratando de hacer esto… muchas gracias!!!

  10. Pablo
    Publicado: 26 mayo, 2016 a las 3:32 | Permalink

    Casi nunca funciona algo cuando copio y pego… siempre hay algún problema o algo que cambiar o probar de otra manera. Pero esto funcionó a la perfección. Muchas gracias!

  11. Publicado: 4 junio, 2016 a las 17:59 | Permalink

    Dios le bendiga porque a mi no me funciona en mi pantalla se ve bien pero cuando entro de otra computadora mas pequeña el contenido se come la imagen de atrás por favor mire mi pagina http://www.llamandoalomalomalo.org

  12. jair silva
    Publicado: 6 junio, 2016 a las 21:26 | Permalink

    Genial, me sirvió, y con unas cuantas adaptaciones, se escala sin problema hasta el tamaño de móviles. Gracias

  13. luis rivero
    Publicado: 29 junio, 2016 a las 13:10 | Permalink

    Muchas gracias por el aporte, lo felicito por la iniciativa de ayudar sin ningún beneficio a cambio, que dios lo bendiga. Miranda, Venezuela.

  14. Diana
    Publicado: 5 julio, 2016 a las 19:42 | Permalink

    100% excelente!! Mil Graciass ;)

  15. Publicado: 10 agosto, 2016 a las 12:21 | Permalink

    De lujo, gracias

  16. frank
    Publicado: 13 septiembre, 2016 a las 17:18 | Permalink

    Buenas:
    Intento fijar imagen de fondo que se adapte.
    El inicio funciona pero cuando incluye sliders pierdo el efecto.
    Solución?

    Gracias

  17. Publicado: 19 octubre, 2016 a las 7:20 | Permalink

    Buenas, no se que me pasa que siempre que intento meter un código css no afecta a nada, no funciona. Mi plantilla está ya muy toqueteada, es probable que sea por eso?

    En el caso de que este mal, sería posible hacer la imagen de fondo adaptativa mediante código html en la plantilla? Muchas gracias!

  18. benjamin
    Publicado: 28 enero, 2017 a las 0:38 | Permalink

    como debo hacerle para que mi pagina de mi microtik se adapte a los móviles y las pc
    tengo esto

    Login

    $(if chap-id)

    $(endif)

    REDES TESKALI

    $(if trial == ‘yes’)Free trial available, click here.$(endif)
    $(if error)$(error)$(endif)

    document.oncontextmenu = function(){return false;}

  19. Publicado: 9 marzo, 2017 a las 18:56 | Permalink

    muchas gracias, me fue de gran ayuda !!!

  20. mar
    Publicado: 27 marzo, 2017 a las 8:39 | Permalink

    Hola, mi problema es que depende del ordenador y la resolución, las imágenes de mi web se ven alargadas. Hay algún código que haga que las imágenes se vean siempre bien…
    graciasssssssssss

  21. Merly Gómez
    Publicado: 12 junio, 2017 a las 0:21 | Permalink

    Excelente me ayudó mucho. Gracias Saludos :)

  22. Publicado: 3 septiembre, 2017 a las 16:37 | Permalink

    ¿Y dónde copio dicha instruccion CSS?

  23. Publicado: 10 diciembre, 2017 a las 5:43 | Permalink

    En mi caso no me sirivio, me podrían ayudar

Publicar un Comentario

Tu email nunca será publicado o compartido. Los campos requeridos están marcados con un *

*
*

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

By: Dissenyaweb.com