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

J'ai un site Web (g-floors.eu) et je veux rendre l'arrière-plan (en CSS j'ai défini une image bg pour le contenu) également réactif. Malheureusement, je n'ai vraiment aucune idée de la façon de procéder, sauf une chose à laquelle je peux penser, mais c'est une solution de contournement. Créer plusieurs images puis utiliser la taille de l'écran CSS pour changer les images, mais je veux savoir s'il existe un moyen plus pratique d'y parvenir.

Fondamentalement, ce que je veux, c'est que l'image (avec le filigrane «G») se redimensionne automatiquement sans afficher moins de l'image. Si c'est possible bien sûr

lien: g-floors.eu

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

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

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 sur le fait de ne pas définir la largeur, la hauteur ou la marge fait référence à la question d'origine d'OP concernant la mise à l'échelle avec la taille de la fenêtre. Dans d'autres cas d'utilisation, vous pouvez définir la largeur / hauteur / marges si nécessaire.

par ce code, votre image d'arrière-plan va au centre et fixe sa taille quel que soit le changement de taille de votre div, bon pour les petites, grandes et normales tailles, meilleur pour tous, je l'utilise pour mes projets où ma taille d'arrière-plan ou ma taille de 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;

Essaye ça :

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

CSS:

background-size: 100%;

Cela devrait faire l'affaire! :)

Voici le mixin sass pour l'image d'arrière-plan réactive que j'utilise. Cela fonctionne pour n'importe quel blockélément. Bien sûr, la même chose peut fonctionner en CSS simple, vous n'aurez qu'à calculer paddingmanuellement.

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

C'est facile =)

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

Jetez un œil à la démo jsFiddle

Voici le meilleur moyen que j'ai obtenu.

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

Vérifiez sur les w3schools

Plus d'options disponibles

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

j'ai utilisé

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

qui a très bien fonctionné.

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

Site Web réactif en ajoutant un rembourrage à la hauteur / largeur de l'image inférieure x 100 = padding-bottom%:

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

Méthode plus compliquée:

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

Essayez de redimensionner l'arrière-plan eq Firefox Ctrl + M pour voir le script magique agréable, je pense que le meilleur:

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

Vous pouvez l'utiliser. J'ai testé et son fonctionnement est 100% correct:

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

Vous pouvez tester votre site Web avec réactivité dans ce simulateur de taille d'écran: http://www.infobyip.com/testwebsiteresolution.php

Videz votre cache à chaque fois que vous apportez des modifications et je préférerais utiliser Firefox pour le tester.

Si vous souhaitez utiliser une image depuis un autre site / URL et que vous n'aimez pas: background-image:url('../images/bg.png'); // Cette structure consiste à utiliser l'image de votre propre serveur hébergé. Ensuite, utilisez comme ceci: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Prendre plaisir :)

Si vous souhaitez que l'image entière s'affiche indépendamment du rapport d'aspect, essayez ceci:

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

Cela montrera l'image entière quelle que soit la taille de l'écran.

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

Juste deux lignes de code, cela fonctionne.

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

Adaptatif pour le rapport carré avec 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;

ou

background-size:100%;

Je pense que la meilleure façon de le faire est la suivante:

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

De cette façon, il n'est pas nécessaire de ne rien faire de plus et c'est assez simple.

Au moins, ça marche pour moi.

J'espère que ça aide.

Essayez d'utiliser background-sizemais en utilisant DEUX ARGUMENTS Un pour la largeur et l'autre pour la hauteur

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 propriété position peut être utilisée pour aligner le haut en bas et le centre selon vos besoins et la taille de l'arrière-plan peut être utilisée pour le recadrage central (couverture) ou l'image complète (contenir ou 100%)