¿Alguien puede decirme qué estoy haciendo mal? Está escalando correctamente, pero no muestra la imagen completa. También quería que
sentara sobre él en un dispositivo móvil, ¿es posible?
El HTML:
BleepBleeps
A family of little friends
that make parenting easier
El CSS:
.main-header { background-image: url(../img/bb-background2.png); background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; height: 100%; } h1.logo { text-indent: -9999px; height:115px; margin-top: 10%; }
- Rejilla Bootstrap con envoltura fija: evita que las columnas se acumulen
- Alineación de elementos de grilla en toda la fila / columna (como elementos flexibles)
- ¿Cómo dibujar un sector circular en CSS?
- Cómo centrar verticalmente la imagen dentro de div
- cambiar el tamaño de la fuente para que quepa en un div (en una línea)
http://css-tricks.com/perfect-full-page-background-image/
//HTML
//CSS #bg { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; }
O
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% */ } }
O
//HTML
//CSS #bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; } //jQuery $(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"); });
Una sugerencia acerca de la solución “background-size: cover”, debe colocarla después de la definición de “fondo”; de lo contrario, no funcionará, por ejemplo, esto no funcionará:
html, body { height: 100%; background-size: cover; background:url("http://i.imgur.com/aZO5Kolb.jpg") no-repeat center center fixed; }
- CSS: antes en SVG en línea
- HTML 5 extraño img siempre agrega 3px margen en la parte inferior
- CSS Auto esconde elementos después de 5 segundos
- ¿Puedes agregar ruido a un gradiente de CSS3?
- SASS: use variables en múltiples archivos
- ¿Se descargan las imágenes CSS sin usar?
- Soporte para “border-radius” en IE
- Cambia el orden de col – * – 12 columnas en Bootstrap usando push / pull
- La URL del contenido no muestra la imagen en el navegador Firefox
- Rellena el espacio vertical restante con CSS usando la pantalla: flex
- ¿Qué es la hoja de estilo del agente de usuario?