Imágenes de fondo CSS responsivas
Tengo un sitio web (g-floors.eu) y quiero que el fondo (en CSS he definido una imagen bg para el contenido) también responda. Desafortunadamente, realmente no tengo idea de cómo hacer esto, excepto una cosa que se me ocurre, pero es una gran solución. Crear varias imágenes y luego usar el tamaño de pantalla CSS para cambiar las imágenes, pero quiero saber si hay una forma más práctica de lograrlo.
Básicamente, lo que quiero lograr es que la imagen (con la marca de agua 'G') cambie de tamaño automáticamente sin mostrar menos imagen. Si es posible claro
enlace: g-floors.eu
Código que tengo hasta ahora (parte del contenido)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
Si desea que la misma imagen se escale según el tamaño de la ventana del navegador:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
No establezca ancho, alto o márgenes.
EDITAR: La línea anterior sobre no configurar el ancho, alto o margen se refiere a la pregunta original de OP sobre la escala con el tamaño de la ventana. En otros casos de uso, es posible que desee establecer el ancho/alto/márgenes si es necesario.
Con este código, su imagen de fondo va al centro y corrige su tamaño cualquiera que sea el cambio de tamaño de su div, bueno para tamaños pequeños, grandes y normales, lo mejor para todos, lo uso para mis proyectos donde mi tamaño de fondo o tamaño de div pueden cambiar
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
Prueba esto :
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
Aquí está sass mixin para la imagen de fondo responsiva que uso. Sirve para cualquier blockelemento. Por supuesto, lo mismo puede funcionar en CSS simple, solo tendrás que calcularlo paddingmanualmente.
@mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
@include responsive-bg-image(204, 81);
}
Ejemplo http://jsfiddle.net/XbEdW/1/
