Responsive Design et background-image

Version imprimable

29/05/2013, 10h38
ni-ni13

Responsive Design et background-image

Bonjour,

J'utilise Bootstrap pour faire un site en responsive design.
Je souhaite mettre une image en background-image d'une <div> est que cette image puisse s'adapter au taille écran, comment faire ?

J'ai bien trouvé le javascript : jquery.anystretch.js qui permet bien l'adaptation de l'image mais je n'arrive pas à imposer la hauteur de la div.

Merci de votre aide
29/05/2013, 10h42
rodolphebrd

Bonjour,

Il y a la possibilité d'utiliser background-size.

Oui mais sur ma div cela ne fonctionne pas

Voici mon code

html avec appel du JS----------
Code:

1 2 3 4 5 6 7 <div class="span12 bandeau">ici ma photo en css background</div> <script type="text/javascript" src="js/jquery.anystretch.js"></script> <script> $('.bandeau').anystretch("img/bandeau_apple.jpg"); </script> </body>
ma css je voudrai avoir une hauteur de 258 px mais ajustable à chaque écran il le fait mais ne respecte pas les proportions------------
Code:

1 2 3 .bandeau { min-height:258px; }

29/05/2013, 19h42
NoSmoking

Bonjour,
as tu simplement pensé à charger jQuery ?
31/05/2013, 08h07
ni-ni13

Oui

Code:

<script src="js/jquery.js"></script>
31/05/2013, 10h05
rodolphebrd

Peut-être que ce lien pourra vous aider: http://css-tricks.com/perfect-full-p...kground-image/
31/05/2013, 10h22
Candygirl

Bonjour,

Citation:

Envoyé par rodolphebrd

Bonjour,

Il y a la possibilité d'utiliser background-size.

Citation:

Envoyé par ni-ni13

Oui mais sur ma div cela ne fonctionne pas

Pourrait-on avoir le code correspondant pour comprendre le problème ?
31/05/2013, 16h54
ni-ni13

Le code est plus haut dans le POST
31/05/2013, 19h12
Candygirl

Le bout de code donné ne permet pas d'observer quoi que ce soit du problème avec background-size :?

Voici le code essayé ce jour avec background-size mais cela ne marche pas l'image s'affiche mais le responsive design ne réduit pas l'image automatique merci de votre aide
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <style type="text/css"> #example { background-image: url(img/bandeau_apple.jpg); background-repeat: no-repeat; background-size: auto; height: 258px; } </style> @media (max-width: 767px) { #example { background-size: cover; } } <div id="example" class="span12">example</div>

comme base de départ je verrais ça:

Code:

<section></section>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html, body{
	height:100%;
}
section { 
  width:70%;
  height:50%;
  border:solid 1px salmon;/*pour visualiser la zone incluant l'image*/
 
  margin:0;
  padding:0;
  background: url(http://lorempixel.com/g/200/200/) no-repeat center; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}

03/06/2013, 14h06
Candygirl
En plaçant
Code:

1 2 3 4 5 @media (max-width: 767px) { #example { background-size: cover; } }
correctement à l'intérieur de la balise <style>, et non en dehors, le background-size:cover fonctionne comme attendu sur les navigateurs le reconnaissant.