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

24 comentarios

Ir al formulario de comentarios

    • Silvia on 31 octubre, 2012 at 20:06

    Fantástico!!!!!!

    • carlos on 7 agosto, 2014 at 18:49

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

    • zamorabrush on 19 septiembre, 2014 at 17:26

    de lujo!!!!!!

    • Daniel on 21 agosto, 2015 at 22:19

    Funciona perfecto, Gracias 🙂

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

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

    • daniel el chido on 8 febrero, 2016 at 1:37

    Muchas gracias, fue de mucha ayuda

  3. Funciona 100% bien ;))

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

    Saludos desde Barcelona!!!

    • jose romero on 20 marzo, 2016 at 6:30

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

    • Pablo on 26 mayo, 2016 at 3:32

    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!

  4. 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

    • jair silva on 6 junio, 2016 at 21:26

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

    • luis rivero on 29 junio, 2016 at 13:10

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

    • Diana on 5 julio, 2016 at 19:42

    100% excelente!! Mil Graciass 😉

    • José on 10 agosto, 2016 at 12:21

    De lujo, gracias

    • frank on 13 septiembre, 2016 at 17:18

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

    Gracias

    • Putule on 19 octubre, 2016 at 7:20

    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!

    • benjamin on 28 enero, 2017 at 0:38

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

  5. muchas gracias, me fue de gran ayuda !!!

    • mar on 27 marzo, 2017 at 8:39

    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

    • Merly Gómez on 12 junio, 2017 at 0:21

    Excelente me ayudó mucho. Gracias Saludos 🙂

    • Raul on 3 septiembre, 2017 at 16:37

    ¿Y dónde copio dicha instruccion CSS?

    • jesus on 10 diciembre, 2017 at 5:43

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

    • mbear on 19 julio, 2018 at 17:11

    Saludos
    Gracias por la informacion, pero mi problema es que tengo una galeria de portafolio y las imagenes, no se daptan al cuadro, se ven grande y quisiera que se vean adaptadas

Deja un comentario

Your email address will not be published.