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

Salut.

Tu dois pouvoir arriver à ceux que tu veux avec un background-size: cover. Voir Un arrière-plan extensible intelligent.

Et bien non justement cette solution fonctionne en effet mais sur le fond de la page pas sur le fond de ma <div>.

Il y a une propriété CSS3 qui permet, je pense, d'obtenir le résultat que tu souhaites.

Je te laisse jeter un coup d'oeil ici de ce que j'ai fait.

Bien entendu pour voir le résultat, il faut redimensionner la partie avec l'aperçu afin que le bloc fasse moins de 640px de large.
Modifié par j0r (29 May 2013 - 11:32)

Merci pour ce lien mais cela ne fonctionne pas avec le code déjà inséré de Bootstrap.
Une idée ?

Sans plus d'éléments sur ton code actuel, difficile de dire.

A vue de nez, je dirais qu'il te manque un min-height quelque part là.

Merci à vous tous de votre aide

Voici mon code

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

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

.bandeau {
	min-height:258px;
}

Voici le nouveau code essayé avec background-size sans succès. L'image s'affiche mais le responsive design ne réduit pas l'image.

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

Merci

Bonjour,
la première question ne le semble pas très claire.
<peut être avancera tu avec ça:

<div>
<img src="img/bandeau_apple.jpg" class="bandeau">
</div>

.bandeau{
width:100%;
}

salut!

plutôt comme ceci:

<style type="text/css">
#example {
	background-image: url(img/bandeau_apple.jpg);
	background-repeat: no-repeat;
	background-size: auto;
	height: 258px;
}

@media (max-width: 767px) {
	#example {
	background-size: cover;
	}
}
	
</style>