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
Tweet
24 comentarios
Ir al formulario de comentarios
Fantástico!!!!!!
Eres un crack, me vino como anillo al dedo, Gracias
de lujo!!!!!!
Funciona perfecto, Gracias 🙂
Este “truco” lo use en mi blog pero se adapta para la visualización desde el móvil, ¿se puede arreglar de alguna forma?
Perdón, quise decir que NO se adapta a la version movil :/
Muchas gracias, fue de mucha ayuda
Funciona 100% bien ;))
Muchas Gracias por tus pequeños trucos porque mejoran las páginas web…
Saludos desde Barcelona!!!
Increible amigo, me estaba rompiendo el coco tratando de hacer esto… muchas gracias!!!
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!
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
Genial, me sirvió, y con unas cuantas adaptaciones, se escala sin problema hasta el tamaño de móviles. Gracias
Muchas gracias por el aporte, lo felicito por la iniciativa de ayudar sin ningún beneficio a cambio, que dios lo bendiga. Miranda, Venezuela.
100% excelente!! Mil Graciass 😉
De lujo, gracias
Buenas:
Intento fijar imagen de fondo que se adapte.
El inicio funciona pero cuando incluye sliders pierdo el efecto.
Solución?
Gracias
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!
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;}
muchas gracias, me fue de gran ayuda !!!
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
Excelente me ayudó mucho. Gracias Saludos 🙂
¿Y dónde copio dicha instruccion CSS?
En mi caso no me sirivio, me podrían ayudar
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