html - fit - Estirar y escalar el fondo CSS
div background image (16)
¿Hay una manera de obtener un fondo en CSS para ampliar o escalar para llenar su contenedor?
Agregar una línea de background-attachment :
#background {
background-attachment:fixed;
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
Definir "estirar y escalar" ...
Si tiene un formato de mapa de bits, generalmente no es bueno (gráficamente hablando) estirarlo y tirarlo. Puedes usar patrones repetibles para dar la ilusión del mismo efecto. Por ejemplo, si tiene un degradado que se aclara hacia la parte inferior de la página, debe usar un gráfico que tenga un solo píxel de ancho y la misma altura que su contenedor (o, de preferencia, más grande para tener en cuenta la escala) y luego colocarlos en mosaico a través del página. Del mismo modo, si el gradiente corriera a través de la página, sería un píxel alto y más ancho que su contenedor y se repetirá hacia abajo en la página.
Normalmente para dar la ilusión de que se extiende para llenar el contenedor cuando el contenedor crece o se encoge, se hace que la imagen sea más grande que el contenedor. Cualquier superposición no se mostrará fuera de los límites del contenedor.
Si desea un efecto que se base en algo como una caja con bordes curvos, entonces pegaría el lado izquierdo de su caja al lado izquierdo de su contenedor con una superposición suficiente que (dentro de lo razonable) sin importar el tamaño del contenedor, nunca se queda sin fondo y luego acoda una imagen del lado derecho de la caja con bordes curvos y la coloca a la derecha del contenedor. Por lo tanto, a medida que el contenedor se encoge o crece, el efecto de la caja curva parece reducirse o crecer con él; de hecho, no lo hace, pero da la ilusión de que es lo que está sucediendo.
Para hacer que la imagen realmente se contraiga y crezca con el contenedor, debe usar algunos trucos de capas para que la imagen parezca funcionar como fondo y algunos javascript para redimensionarla con el contenedor. No hay una forma actual de hacer esto con CSS ...
Si está usando gráficos vectoriales, estoy fuera de mi ámbito de experiencia, me temo.
Esto es lo que he hecho de ello. En la clase de estiramiento, simplemente cambié la altura a auto . De esta manera, la imagen de fondo siempre tendrá el mismo tamaño que el ancho de la pantalla y la altura siempre tendrá el tamaño correcto.
#background {
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
Me gustaría señalar que esto es equivalente a hacer:
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}
No actualmente. Estará disponible en CSS 3 , pero llevará algún tiempo hasta que se implemente en la mayoría de los navegadores.
No es posible escalar una imagen con CSS, pero se puede lograr un efecto similar de la siguiente manera.
Utilice este marcado:
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
con el siguiente CSS:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
y deberias haber terminado!
Para escalar la imagen a "sangrado completo" y mantener la relación de aspecto, puede hacer esto en su lugar:
.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }
Funciona muy bien! Sin embargo, si se recorta una dimensión, se recortará solo en un lado de la imagen, en lugar de recortarla uniformemente en ambos lados (y centrada). Lo he probado en Firefox, Webkit e Internet Explorer 8.
Otra gran solución para esto es Backstretch de Srobbin, que puede aplicarse al cuerpo o cualquier elemento de la página: http://srobbin.com/jquery-plugins/backstretch/
Prueba esto
body
{
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Pruebe el artículo de developer.mozilla.org/en/CSS/background-size . Si usa todo lo siguiente, funcionará en la mayoría de los navegadores, excepto en Internet Explorer.
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
Una sugerencia adicional para el truco de SolidSmile es escalar (el cambio de tamaño proporcional) estableciendo un ancho y utilizando el auto para la altura.
Ex:
#background {
width: 500px;
height: auto;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
Use el atributo de tamaño de fondo en CSS3:
.class {
background-image: url(bg.gif);
background-size: 100%;
}
EDITAR: Modernizr admite la detección de soporte de tamaño de fondo . Puede usar una solución de JavaScript escrita para funcionar como lo necesite y cargarla dinámicamente cuando no hay soporte. Esto mantendrá el código mantenible sin tener que recurrir a hacks CSS intrusivos para ciertos navegadores.
Personalmente utilizo un script para tratar con él usando jQuery, es una adaptación de imgsizer . Como la mayoría de los diseños que ahora uso con el ancho% para diseños fluidos en todos los dispositivos, hay una ligera adaptación a uno de los bucles (teniendo en cuenta los tamaños que no siempre son 100%):
for (var i = 0; i < images.length; i++) {
var image = images[i],
width = String(image.currentStyle.width);
if (width.indexOf(''%'') == -1) {
continue;
}
image.origWidth = image.offsetWidth;
image.origHeight = image.offsetHeight;
imgCache.push(image);
c.ieAlpha(image);
image.style.width = width;
}
EDITAR: También puede estar interesado en jQuery CSS3 Finaliz [s] e .
Use la propiedad border-image : yourimage para configurar su imagen y escalarla hasta el borde completo de su pantalla o ventana.
Utilice el background-size propiedad CSS 3 :
#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
Esto está disponible para los navegadores modernos, desde 2012.
En una palabra: no. La única forma de estirar una imagen es con la etiqueta <img> .Tendrás que ser creativo.
Esto solía ser cierto en 2008, cuando se escribió la respuesta. Hoy en día los navegadores modernos son compatibles background-size que resuelve este problema. Ten en cuenta que IE8 no lo admite.
Para los navegadores modernos, puede lograr esto utilizando background-size :
body {
background-image: url(bg.jpg);
background-size: cover;
}
cover significa estirar la imagen vertical u horizontalmente para que nunca se repita / repare.
Eso funcionaría para Safari 3 (o posterior), Chrome, Opera 10+, Firefox 3.6+ e Internet Explorer 9 (o posterior).
Para que funcione con versiones más bajas de Internet Explorer, pruebe estos CSS:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''.myBackground.jpg'', sizingMethod=''scale'');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''myBackground.jpg'', sizingMethod=''scale'')";
.style1 {
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 Whatever +
- IE 9+
- Opera 10+ (Opera 9.5 admite el tamaño de fondo pero no las palabras clave)
- Firefox 3.6 o superior (Firefox 4 admite versiones prefijadas sin proveedor)
Además puedes probar esto para una solución ie
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''.myBackground.jpg'', sizingMethod=''scale'');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''myBackground.jpg'', sizingMethod=''scale'')";
zoom:1;
Gracias a este artículo por Chris Coyier http://css-tricks.com/perfect-full-page-background-image/