Imágenes de fondo de css receptivas

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 por una cosa que se me ocurre, pero es una solución alternativa. Crear múltiples 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 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 en función del 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 el ancho, la altura o los márgenes.

EDITAR: La línea anterior sobre no establecer el ancho, la altura o el 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 se centra y fija el tamaño independientemente del cambio de tamaño de 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 puede 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 una imagen de fondo receptiva que uso. Funciona para cualquier blockelemento. Por supuesto, lo mismo puede funcionar en CSS simple, solo tendrá 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/

Esta es fácil =)

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

Echa un vistazo a la demo jsFiddle

Aquí está la mejor manera que tengo.

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

Compruebe en las escuelas w3

Más opciones disponibles

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

solía

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

que funcionó muy bien

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

Sitio web receptivo agregando relleno en la imagen inferior alto / ancho x 100 = padding-bottom%:

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

Intente cambiar el tamaño de la ecualización de fondo Firefox Ctrl + M para ver un script mágico agradable, creo que es el mejor:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

Puedes usar esto. Lo he probado y funciona 100% correcto:

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 usar una imagen desde otro sitio / URL y no como: background-image:url('../images/bg.png'); // Esta estructura es usar la imagen desde su propio servidor alojado. Luego use así: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Disfruta :)

Si desea que toda la imagen 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.

    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>

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

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

Adaptativo para 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 esto:

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.

Intente usar background-sizepero use DOS ARGUMENTOS Uno para el ancho y el otro para la altura

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

la propiedad de posición se puede usar para alinear la parte superior inferior y el centro según sus necesidades y el tamaño del fondo se puede usar para el recorte central (cubierta) o la imagen completa (contener o 100%)