Imágenes de fondo css receptivas

Tengo un sitio web (g-floors.eu) y quiero hacer que el fondo (en css he definido una imagen-bg para el contenido) también responda. Desafortunadamente, realmente no tengo ni idea de cómo hacer esto, excepto por una cosa que se me ocurre, pero es una buena solución. Creando múltiples imágenes y luego usando el tamaño de la pantalla CSS para cambiar las imágenes, pero quiero saber si hay una forma más práctica para lograr esto.

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 de la imagen. Si es posible, por supuesto

enlace: g-floors.eu

Código que tengo hasta ahora (parte de 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.

con este código, su imagen de fondo se centra y la repara según el tamaño de su div. cambia, es bueno para tamaños pequeños, grandes y normales, lo mejor para todos, lo uso para mis proyectos donde el tamaño de fondo o el 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; 

CSS:

 background-size: 100%; 

¡Eso debería hacer el truco! 🙂

Aquí está sass mixin para la imagen de fondo sensible que uso. Funciona para cualquier elemento de block . Por supuesto, lo mismo puede funcionar en CSS simple, solo tendrá que calcular el padding manualmente.

 @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/

Aquí está la mejor manera que tengo.

 #content { background-image:url('smiley.gif'); background-repeat:no-repeat; background-size:cover; } 

Compruebe en las w3schools

Más opciones disponibles

 background-size: auto|length|cover|contain|initial|inherit; 

Este es uno fácil =)

 body { background-image: url(http://sofes.miximages.com/css/photo.jpeg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } 

Eche un vistazo a la demo de jsFiddle

solía

 #content { width: 100%; height: 500px; background-size: cover; background-position: center top; } 

que funcionó muy bien

Sitio web receptivo al agregar relleno en la altura / ancho de la imagen inferior x 100 = relleno% inferior:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/


Método más complicado:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios


Intenta redimensionar el fondo eq Firefox Ctrl + M para ver el script mágico, creo que es el mejor:

http://www.minimit.com/demos/fullscreen-backgrounds-con-concentrado-contenido

Si desea que la imagen completa se muestre independientemente de la relación de aspecto, intente esto:

 background-image:url('../images/bg.png'); background-repeat:no-repeat; background-size:100% 100%; background-position:center; 

Esto mostrará la imagen completa sin importar el tamaño de la pantalla.

 #container { background-image: url("../images/layout/bg.png"); background-repeat: no-repeat; background-size: 100% 100%; height: 100vh; margin: 3px auto 0; position: relative; } 

Puedes usar esto He probado y funciona correctamente al 100%:

 background-image:url('../images/bg.png'); background-repeat:no-repeat; background-size:100%; background-position:center; 

Puede probar su sitio web con capacidad de respuesta en este simulador de tamaño de pantalla: http://www.infobyip.com/testwebsiteresolution.php

Borre su caché cada vez que realice cambios y preferiría usar Firefox para probarlo.

Si desea utilizar un formulario de imagen de otro sitio / URL y no como: background-image:url('../images/bg.png'); // Esta estructura es para usar la imagen de su propio servidor alojado. Luego use esto: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Disfruta 🙂

   

Solo dos líneas de código, funciona.

 #content { background-image: url('../images/bg.png'); background-size: cover; } 

Adaptable para la relación cuadrada con jQuery

 var Height = $(window).height(); var Width = $(window).width(); var HW = Width/Height; if(HW<1){ $(".background").css("background-size","auto 100%"); } else if(HW>1){ $(".background").css("background-size","100% auto"); } 
 background:url("img/content-bg.jpg") no-repeat; background-position:center; background-size:cover; 

o

 background-size:100%; 

Creo que la mejor manera de hacerlo es esta:

 body { font-family: Arial,Verdana,sans-serif; background:url("/images/image.jpg") no-repeat fixed bottom right transparent; } 

De esta manera, no hay necesidad de hacer nada más y es bastante simple.

Al menos, funciona para mí.

Espero que ayude.