Discussion :

[ni-ni13]

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

[rodolphebrd]

Bonjour,

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

[ni-ni13]

Oui mais sur ma div cela ne fonctionne pas

Voici mon code

html avec appel du JS----------

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

Bonjour,
as tu simplement pensé à charger jQuery ?

[ni-ni13]

Oui

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="js/jquery.js"></script>

[rodolphebrd]

Peut-être que ce lien pourra vous aider: http://css-tricks.com/perfect-full-p...kground-image/

[Candygirl]

Bonjour,

Bonjour,

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

Oui mais sur ma div cela ne fonctionne pas

Pourrait-on avoir le code correspondant pour comprendre le problème ?

[ni-ni13]

Le code est plus haut dans le POST

[Candygirl]

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

[ni-ni13]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>