poner - Estira y escala una imagen CSS en segundo plano, solo con CSS
imagen cover css (18)
¡Gracias!
Pero entonces no funcionó para los navegadores Google Chrome y Safari (el estiramiento funcionó, ¡pero la altura de las imágenes era de solo 2 mm!) , Hasta que alguien me dijo lo que faltaba:
Intente establecer la
height:auto;min-height:100%;
Así que cambia eso por tu height:100%; línea, da:
#### #background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:auto;
min-height:100%;
}
Justo antes de ese código recién agregado, tengo esto en mi estilo de temas de Drupal style.css :
html, cuerpo {altura: 100%;}
#page {fondo: #ffffff; altura: auto! important; altura: 100%; min-height: 100%; posición: relativa;}
Luego tengo que hacer un nuevo bloque dentro de Drupal con la imagen al agregar class=stretch :
<img alt = "" class = "stretch" src = "pic.url" />
Solo copiar una imagen con el editor en ese bloque Drupal no funciona; uno tiene que cambiar el editor a texto sin formato.
Quiero que mi imagen de fondo se extienda y se amplíe según el tamaño de la ventana del navegador.
He visto algunas preguntas sobre el Desbordamiento de pila que hacen el trabajo, como Estirar y escalar el fondo de CSS, por ejemplo. Funciona bien, pero quiero colocar la imagen con el background , no con una etiqueta img .
En eso se coloca una etiqueta img , y luego con CSS le hacemos tributo a la etiqueta img .
width:100%; height:100%;
Funciona, pero esa pregunta es un poco antigua y afirma que en CSS 3, cambiar el tamaño de una imagen de fondo funcionará bastante bien. He probado este ejemplo el primero , pero no funcionó para mí.
¿Hay un buen método para hacerlo con la declaración de la background-image ?
¿Quieres lograr esto solo usando una imagen? Porque realmente puedes hacer algo similar a un fondo de estiramiento usando dos imágenes. Imágenes PNG por ejemplo.
He hecho esto antes, y no es tan difícil. Además, creo que estirar solo dañaría la calidad del fondo. Y si agrega una imagen enorme, ralentizaría la velocidad de las computadoras y los navegadores.
CSS3 tiene un pequeño atributo agradable llamado background-size:cover .
Esto escala la imagen para que el área de fondo quede completamente cubierta por la imagen de fondo mientras se mantiene la relación de aspecto. Se cubrirá toda el área, sin embargo, parte de la imagen puede no ser visible si el ancho / alto de la imagen redimensionada es demasiado grande
CSS:
html,body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
En realidad, puedes lograr el mismo efecto que una imagen de fondo con la etiqueta img. Solo tiene que establecer su índice z más bajo que todo lo demás, establecer la posición: absoluta y usar un fondo transparente para cada cuadro en primer plano.
Estoy de acuerdo con la imagen en div absoluta con 100% de ancho y alto. Asegúrese de establecer el 100% de ancho y alto para el cuerpo en el CSS y establezca los márgenes y el relleno en cero. Otro problema que encontrará con este método es que al seleccionar texto, el área de selección a veces puede abarcar la imagen de fondo, lo que tiene el desafortunado efecto de hacer que la página completa tenga el estado seleccionado. Puede solucionar esto usando la regla CSS de user-select:none , así:
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
width: 100%
margin: none;
padding: none;
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -99999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#background img {
width: 100%;
height: 100%;
}
#main{ z-index:10;}
</style>
</head>
<body>
<div id="main">
content here
</div>
<div id="background"><img src="bg.jpg"></div>
</body>
</html>
Una vez más, Internet Explorer es el malo aquí porque no reconoce la opción de selección de usuario, ni siquiera Internet Explorer 10 vista previa de Internet Explorer 10 admite, por lo que tiene la opción de usar JavaScript para evitar la selección de la imagen de fondo (por ejemplo, http://www.felgall.com/jstip35.htm ) o utilizando el método de estiramiento en segundo plano CSS 3 .
Además, para SEO , pondría la imagen de fondo en la parte inferior de la página, pero si la imagen de fondo tarda demasiado en cargarse (es decir, inicialmente con un fondo blanco), podría moverse a la parte superior de la página.
Explicado por css-tricks https://css-tricks.com/perfect-full-page-background-image/
demostración: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
código:
body {
background: url(images/myBackground.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Para poder escalar sus imágenes de manera apropiada según el tamaño del contenedor, se incluye lo siguiente:
{
background-size:contain;
background-repeat: no-repeat;
}
Podrías usar la propiedad CSS3 para hacerlo bastante bien. Cambia el tamaño a la relación, por lo que no hay distorsión de la imagen (aunque sí mejora las imágenes pequeñas). Solo tenga en cuenta que aún no está implementado en todos los navegadores.
background-size: 100%;
Puede usar la propiedad border-image : yourimage para escalar la imagen hasta el borde. Incluso si da la imagen de fondo, la imagen del borde se dibujará sobre ella.
La propiedad de imagen de borde es muy útil si su hoja de estilo se implementa en algún lugar que no sea compatible con CSS3. Si está usando Chrome of Firefox, entonces recomiendo la propiedad de background-size:cover .
Puedes agregar esta clase a tu archivo CSS.
.stretch {
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;
}
Funciona en
- Safari 3 o posterior
- Chrome lo que sea o más tarde
- Internet Explorer 9 o posterior
- Opera 10 o posterior (Opera 9.5 admite
background-size, pero no las palabras clave) - Firefox 3.6 o posterior (Firefox 4 admite versiones prefijadas sin proveedor)
Quería centrar y escalar una imagen de fondo, sin extenderla a toda la página, y quería mantener la relación de aspecto. Esto me funcionó, gracias a las variaciones sugeridas en otras respuestas:
IMAGEN EN LÍNEA: ------------------------
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
CSS ----------------------------------
html {
height:100%;
}
#background {
text-align: center;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
margin: auto;
height:100%;
}
Usa este CSS:
background: url(''img.png'') no-repeat;
background-size: 100%;
Usando el código que mencioné ...
HTML
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
CSS
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
Eso produce el efecto deseado: solo se desplazará el contenido, no el fondo.
La imagen de fondo cambia de tamaño a la ventana del navegador para cualquier tamaño de pantalla. Cuando el contenido no se ajusta a la ventana gráfica del navegador y el usuario necesita desplazarse por la página, la imagen de fondo permanece fija en la ventana gráfica mientras el contenido se desplaza.
Con CSS 3 parece que esto sería mucho más fácil.
Utilice el complemento Backstretch . Incluso se podría tener varias imágenes de diapositivas. También funciona dentro de contenedores. De esta manera, por ejemplo, solo se podría cubrir una parte del fondo con una imagen de fondo.
Ya que incluso yo podría hacerlo funcionar, demuestra que es un complemento fácil de usar :).
Yo uso esto, y funciona con todos los navegadores:
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the ''html'' and ''body'' tags, and ensure the page takes up full screen height. */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the ''html'' and ''body'' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn''t work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h2>Stretch that Background Image!</h2>
<p>This text appears in front of the background image. This is because we''ve used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
<p>Go on, try it - resize your browser!</p>
</div>
</body>
</html>
La siguiente parte de CSS debe estirar la imagen con todos los navegadores.
Hago esto dinámicamente para cada página. Por lo tanto, uso PHP para generar su propia etiqueta HTML para cada página. Todas las imágenes están en la carpeta ''imagen'' y terminan con ''Bg.jpg''.
<html style="
background: url(images/''.$pic.''Bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/'images/''.$pic.''Bg.jpg/', sizingMethod=/'scale/');
-ms-filter: /"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/'images/''.$pic.''Bg.jpg/', sizingMethod=/'scale/')/
";>
Si solo tiene una imagen de fondo para todas las páginas, puede eliminar la variable $pic , eliminar las barras diagonales que se escapan, ajustar las rutas y colocar este código en su archivo CSS.
html{
background: url(images/homeBg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''images/homeBg.jpg'', sizingMethod=''scale'');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''images/homeBg'', sizingMethod=''scale'');
}
Esto se probó con Internet Explorer 9, Chrome 21 y Firefox 14.
background-size: 100% 100%;
Estira bg para llenar todo el elemento en ambos ejes.