Esta publicación se publicó originalmente el 21 de agosto de 2009 y ahora está actualizada, ya que se ha revisado por completo. Ambos métodos originales se eliminan y ahora se reemplazan por cuatro métodos nuevos.
El objetivo aquí es una imagen de fondo en un sitio web que cubra toda la ventana del navegador en todo momento. Pongamos algunos detalles al respecto:
- Llena toda la página con imagen, sin espacios en blanco
- Escala la imagen según sea necesario
- Conserva las proporciones de la imagen (relación de aspecto)
- La imagen está centrada en la página
- No causa barras de desplazamiento
- Lo más compatible posible con todos los navegadores
- ¿No son algunas travesuras elegantes como Flash?
Imagen de arriba acreditada a este sitio.
Manera CSS3 impresionante, fácil y progresiva
Podemos hacer esto puramente a través de CSS gracias a la background-size propiedad ahora en CSS3. Usaremos el html elemento (mejor que body ya que siempre es al menos la altura de la ventana del navegador). Establecemos un fondo fijo y centrado en él, luego ajustamos su tamaño usando background-size establecido en la palabra clave de portada.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}Trabaja en:
- Safari 3+
- Chrome lo que sea +
- IE 9+
- Opera 10+ (Opera 9.5 admite el tamaño de fondo pero no las palabras clave)
- Firefox 3.6+ (Firefox 4 admite una versión con prefijo que no sea de un proveedor)
Ver demostración
Actualizar: Gracias a Goltzman en los comentarios por señalar un artículo de Adobe Developer Connection que incluye código para que IE también cubra los fondos:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://css-tricks.com/perfect-full-page-background-image/.myBackground.jpg", sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod='scale')";Pero cuidado, el lector Pierre Orsander dijo que intentaron esto y tuvieron algunos problemas con los enlaces en la página que no funcionaban.
Actualizar: Matt Litherland escribe para decir que cualquiera que intente usar los filtros IE anteriores y tenga problemas con las barras de desplazamiento o los enlaces muertos o cualquier otra cosa (como Pierre arriba) debería intentarlo. NO usándolos en el html o body elemento. Pero en su lugar, un div de posición fija con 100% de ancho y alto.
Técnica de CSS n. ° 1
Muchas gracias, como de costumbre, a Doug Neiner por esta versión alternativa. Aquí usamos una línea <img> elemento, que podrá cambiar de tamaño en cualquier navegador. Establecemos un min-height que lo mantiene llenando la ventana del navegador verticalmente y establece un 100% width lo que lo mantiene llenándose horizontalmente. También establecemos un min-width del ancho de la imagen para que la imagen nunca sea más pequeña de lo que realmente es.
Lo especialmente inteligente es usar una consulta de medios para verificar si la ventana del navegador es más pequeña que la imagen, y usar un porcentaje combinado de margen izquierdo y un margen izquierdo negativo para mantenerlo centrado independientemente.
Aquí está el CSS:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}Trabaja en:
- Cualquier versión de buenos navegadores: Safari / Chrome / Opera / Firefox
- IE 6: Borked, pero probablemente reparable si usa algún tipo de calce de posicionamiento fijo
- IE 7/8: principalmente funciona, no se centra en tamaños pequeños pero llena la pantalla bien
- IE 9: Funciona
Ver demostración
Técnica de solo CSS n. ° 2
Una forma bastante simple de manejar esto es poner una imagen en línea en la página, colocarla en la parte superior izquierda y darle un ancho mínimo y un alto mínimo del 100%, preservando su relación de aspecto.
<img src="https://css-tricks.com/perfect-full-page-background-image/images/bg.jpg" id="bg" alt="">#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}Sin embargo, esto no centra la imagen y ese es un deseo bastante común aquí … Entonces, podemos solucionarlo envolviendo la imagen en un div. Ese div lo haremos dos veces más grande que la ventana del navegador. Luego, se colocará la imagen, conservando su relación de aspecto y cubriendo la ventana visible del navegador, y el centro de eso.
<div id="bg">
<img src="https://css-tricks.com/perfect-full-page-background-image/images/bg.jpg" alt="">
</div>#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}Gracias a Corey Worrell por el concepto de este.
Trabaja en:
- Safari / Chrome / Firefox (no se probó muy atrás, pero las versiones recientes están bien)
- IE 8+
- Opera (cualquier versión) e IE ambos fallar de la misma manera (mal colocado, no estoy seguro de por qué)
- Peter VanWylen escribió para decir que si agrega la imagen a través de JavaScript, la imagen debe tener un ancho: auto; y altura: auto; para trabajar en IE 8, 9 o 10.
Ver demostración
Actualización de enero de 2018: ¿Estás intentando que esto funcione en Android? JL García me escribió diciéndome que necesitaba sumar altura: 100%; y desbordamiento: oculto; al elemento html para que funcione. El fragmento completo es:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}Lo probé y me pareció totalmente correcto. Sin eso / Con eso.
Método jQuery
Toda esta idea se vuelve mucho más fácil (desde la perspectiva de CSS) si sabemos si la relación de aspecto de la imagen (en línea <img> que pretendemos utilizar como fondo) es mayor o menor que la relación de aspecto actual de la ventana del navegador. Si es menor, podemos establecer solo el width al 100% en la imagen y sepa que llenará tanto el alto como el ancho. Si es mayor, podemos establecer solo el height al 100% y sepa que llenará tanto el alto como el ancho.
Tenemos acceso a esta información a través de JavaScript. Como de costumbre por aquí, me gusta apoyarme en jQuery.
<img src="https://css-tricks.com/perfect-full-page-background-image/images/bg.jpg" id="bg" alt="">#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }$(window).load(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");
});Esto no tiene en cuenta el centrado, pero definitivamente podría modificar esto para hacer eso. Créditos a Koen Haarbosch por el concepto detrás de esta idea.
Trabaja en:
- IE7 + (probablemente podría entrar en IE6 con una cuña de posición fija)
- Casi cualquier otro navegador de escritorio
Ver demostración
Actualización (junio de 2012): El lector Craig Manley escribe con una técnica para cargar una imagen de fondo de tamaño adecuado según la pantalla. Al igual que en, no cargue una imagen de fondo enorme de 1900px de ancho para un iPhone.
Primero, harías imágenes como 1024.jpg, 1280.jpg, 1366.jpg, etc. Luego, en lugar de cargar un img, cargarías un shim.
<img id="bg" src="https://css-tricks.com/data:image/gif;base64,https://css-tricks.com/R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: fixed; left: 0; top: 0" />Si no te gusta el gif shim (personalmente creo que está bien porque no es “contenido”, es un fondo) puedes cargar una de las imágenes reales en su lugar. Este código lo tendrá en cuenta.
Luego prueba el ancho de la pantalla y establece el src de la imagen basada en ella. El código a continuación lo hace al cambiar el tamaño, lo que puede que desee o no. Podrías ejecutar el código una vez si quisieras.
(function() {
var win = $(window);
win.resize(function() {
var win_w = win.width(),
win_h = win.height(),
$bg = $("#bg");
// Load narrowest background image based on
// viewport width, but never load anything narrower
// that what's already loaded if anything.
var available = [
1024, 1280, 1366,
1400, 1680, 1920,
2560, 3840, 4860
];
var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null;
if (!current || ((current < win_w) && (current < available[available.length - 1]))) {
var chosen = available[available.length - 1];
for (var i=0; i<available.length; i++) {
if (available[i] >= win_w) {
chosen = available[i];
break;
}
}
// Set the new image
$bg.attr('src', '/img/bg/' + chosen + '.jpg');
// for testing...
// console.log('Chosen background: ' + chosen);
}
// Determine whether width or height should be 100%
if ((win_w / win_h) < ($bg.width() / $bg.height())) {
$bg.css({height: '100%', width: 'auto'});
} else {
$bg.css({width: '100%', height: 'auto'});
}
}).resize();
})(jQuery);Tenga en cuenta que el ancho de la pantalla no es la única buena información que se puede tener al elegir un tamaño de imagen. Vea este artículo.
Disfrutar
Si usa esto, no dude en dejar la técnica que usó y si la modificó de alguna manera en los comentarios a continuación. Siempre es genial ver técnicas “en la naturaleza”.
Descargar archivos
Solo por el bien de la posteridad, hay otro ejemplo aquí llamado table.php que usa una técnica antigua que solía ser parte de este artículo. Tenía algo de inteligencia, pero no era tan buena como ninguna de las técnicas CSS presentadas anteriormente.
Otros recursos
- Complemento jQuery: Vegas, de Jay Salvat