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


195

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

7
Jetez un œil à ce lien, pourrait-il être ce que vous recherchez? css-tricks.com/perfect-full-page-background-image
Christofer Vilander

J'ai l'impression que cette solution que Christofer Vilander a publiée est une meilleure solution que la réponse choisie.
CU3ED

Vous vous demandez simplement pourquoi le site n'implémente pas réellement la fonctionnalité de redimensionnement dont vous parliez, en février 2015? Y avait-il un problème avec cela?
LegendLength

Réponses:


368

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.


3
Est-il également possible de redimensionner automatiquement la largeur et de fixer la hauteur?
jochemke

3
Oui, vous pouvez définir la hauteur de l'image en pixels et la largeur en pourcentages, mais l'image sera déformée. Ce ne sera pas joli.
Andrei Volgin

2
Vous pouvez utiliser une image beaucoup plus petite si vous utilisez un format vectoriel: en.m.wikipedia.org/wiki/Scalable_Vector_Graphics
Andrei Volgin

9
Quoi? Si vous ne définissez pas la largeur, la hauteur du conteneur n'affichera pas du tout l'image.
neige

3
(1) La question initiale portait sur la mise à l'échelle en fonction de la taille d'une fenêtre de navigateur. (2) Des éléments comme divobtenir leur propre hauteur à partir de leur propre contenu, ou prendre l'espace disponible dans un modèle flexbox. Dire que sans largeur / hauteur explicite le conteneur ne s'affichera pas du tout est incorrect. De toute évidence, si vous souhaitez afficher une div vide avec une image d'arrière-plan, vous devrez définir la hauteur et, éventuellement, la largeur, mais vous ne verrez alors qu'une partie d'une image, sauf si le rapport d'aspect est exactement le même que celui de l'image elle-même.
Andrei Volgin

69

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;

À la taille d'écran 800x1280px, l'image est coupée sur le côté droit par la boîte. Toutes les autres tailles semblent bien.
Mugé

52

Essaye ça :

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

33

CSS:

background-size: 100%;

Cela devrait faire l'affaire! :)


27
Cela déformera totalement l'image en fonction du rapport hauteur / largeur de la fenêtre du navigateur. Ne le fais jamais.
Andrei Volgin,

8
Juste pour référence future, cela ne semblera pas mal de cette façon. taille de l'arrière-plan: 100% 100% le ferait, mais déclarer uniquement le x comme 100% l'empêche de paraître terrible. Cas de test: codepen.io/howlermiller/pen/syduB
Timothy Miller

1
il ne paraîtra pas "déformé" mais il étirera l'image au-delà de ses proportions prévues s'il est plus petit que le conteneur ...
Code Noviciat

1
Il en sera de la réponse acceptée. L'OP n'a pas posé de questions sur ce problème, juste s'il était possible de le redimensionner correctement.
Timothy Miller

1
Cette solution a résolu mon problème. +1
JPeG

22

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/


le code du violon (utilise un framework) est différent du code de la réponse.
neige

14

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


13

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;

9

j'ai utilisé

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

qui a très bien fonctionné.


Voilà le code dont j'avais besoin! Merci :)) J'essaie de faire de la parallaxe sur 100% de l'écran mais à 200 pixels de hauteur et je n'ai besoin que de la partie supérieure de l'arrière-plan mais en conservant les proportions de l'image entière.
thinklinux

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

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


4

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


4

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.


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

Juste deux lignes de code, cela fonctionne.

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

2

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

2
background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

ou

background-size:100%;

0

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.


0

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;

0
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%)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.