web-dev-qa-db-fra.com

Images de fond css sensibles

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

En gros, ce que je veux réaliser, c'est que l'image (avec le filigrane "G") se redimensionne automatiquement sans afficher moins d'image. Si c'est possible bien sûr

lien: g-floors.e

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;
}
cssresponsive-designbackground-imageimage-resizing
176
jochemke

Si vous souhaitez que la même image soit redimensionnée 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 la non définition de la largeur, de la hauteur ou de la marge renvoie à la question initiale de OP sur 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.

343
Andrei Volgin

par ce code, votre image de fond va au centre et la fixe quelle que soit votre changement de taille, bon pour les petites, grandes, tailles normales, meilleur pour tous, je l’utilise pour mes projets où la taille de mon fond ou ma taille peut changer

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

Essaye ça :

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

CSS:

background-size: 100%;

Cela devrait faire l'affaire! :)

32
Timothy Miller

Voici sass mixin pour l'image d'arrière-plan réactif que j'utilise. Cela fonctionne pour tout élément block. Bien sûr, la même chose peut fonctionner en CSS simple, il vous suffira de calculer manuellement padding.

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

20
lanan

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 coup d'œil à la démonstration jsFiddle

14
Omar

Voici le meilleur moyen que j'ai.

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

Vérifiez sur le w3schools

Plus d'options disponibles

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

J'ai utilisé

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

qui a vraiment bien fonctionné.

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

Site Web réactif en ajoutant un rembourrage au bas de l’image hauteur/largeur 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 eq de fond Firefox Ctrl + M pour voir la magie Beau script je pense mieux:

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

5
user956584

Vous pouvez l'utiliser. J'ai testé et son fonctionnement à 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é avec ce simulateur de taille d’écran: http://www.infobyip.com/testwebsiteresolution.php

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

Si vous souhaitez utiliser un formulaire Image autre site/URL et non comme: background-image:url('../images/bg.png'); // Cette structure consiste à utiliser l'image à partir de votre propre serveur hébergé. Puis utilisez comme ceci: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Prendre plaisir :)

4
JackSparrow

Si vous voulez que toute l'image apparaisse quel que soit le rapport de format, 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.

4
Mubashar Abbas

Juste deux lignes de code, ça marche.

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}
3
Rajkumar Bansal
    <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>
3
Indranil

Adaptatif pour le ratio 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");
    }
2
OVNI
background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

ou

background-size:100%;
1
bsngr

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'y a pas besoin de faire plus et c'est assez simple.

Au moins, ça marche pour moi.

J'espère que ça aide.

0
user3487225