Images d'arrière-plan css réactives

Question

J'ai un site Web (g-floors.eu) et je souhaite que l'arrière-plan (dans les css, j'ai défini une bg-image pour le contenu) soit également réactif. Malheureusement, je n'ai vraiment aucune idée de la façon de procéder, à l'exception d'une chose à laquelle je pense, mais il s'agit d'une solution de contournement. Il s'agit de créer plusieurs images et d'utiliser la taille d'écran css pour modifier les images, mais je voudrais savoir s'il existe un moyen plus pratique d'y parvenir.

En gros, ce que je veux obtenir, c'est que l'image (avec le filigrane 'G') soit automatiquement redimensionnée sans que l'image soit moins visible. Si c'est possible bien sûr

lien : g-floors.eu

Code que j'ai jusqu'à présent (partie contenu)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

Answer 1

Si vous souhaitez que la même image soit mise à l'échelle en fonction de la taille de la fenêtre du navigateur :

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

Ne définissez pas la largeur, la hauteur ou les marges.

EDIT : La ligne précédente concernant l'absence de réglage de la largeur, de la hauteur ou de la marge fait référence à la question initiale de l'OP concernant la mise à l'échelle en fonction de la taille de la fenêtre. Dans d'autres cas d'utilisation, vous pouvez définir la largeur, la hauteur et les marges si nécessaire.

Answer 2

Avec ce code, votre image de fond se centre et fixe sa taille quelle que soit la taille de votre div, bon pour les petites, grandes, normales tailles, le meilleur pour tous, je l'utilise pour mes projets où la taille du fond ou de la div peut changer.

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

Answer 3

Essayez ceci :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

Answer 4

CSS :

background-size: 100%;

Cela devrait faire l'affaire ! :)

Answer 5

Voici le mixin sass pour une image de fond réactive que j'utilise. Il fonctionne pour tout block élément. Bien sûr, la même chose peut fonctionner en CSS simple, il vous suffit de calculer padding manuellement.

@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);
}

Exemple http://jsfiddle.net/XbEdW/1/