Adapter la largeur d'une image à la taille de l'écran [Résolu]

philippef - 5 janv. 2017 à 14:27 - Dernière réponse : Learn-iT 7 Messages postés mercredi 4 janvier 2017Date d'inscription 7 mars 2017 Dernière intervention
- 5 janv. 2017 à 18:06
Bonjour,

Presque tout est dans le titre !!
J'ai une balise div avec une image de fond.

<div style="width:100%;background-image:url(mon_url);"</div>

je veux que la taille de mon image de fond d'adapte à la taille de l'écran.

merci d'avance
Afficher la suite 

5 réponses

Répondre au sujet
Learn-iT 7 Messages postés mercredi 4 janvier 2017Date d'inscription 7 mars 2017 Dernière intervention - Modifié par Learn-iT le 5/01/2017 à 14:35
0
Utile
Bonjour,

Essaye avec un width : auto
<div style="width:auto;background-image:url(mon_url);"</div>



Facebook : https://www.facebook.com/learnitFR/
Commenter la réponse de Learn-iT
0
Utile
1
Merci.
que je mette width:auto ou width:100% ça me donne la largeur du div mais pas de l'image de fond.
Learn-iT 7 Messages postés mercredi 4 janvier 2017Date d'inscription 7 mars 2017 Dernière intervention - 5 janv. 2017 à 16:28
si l'image n'est pas dans le div , ça donne quoi ?
si ça ne fonctionne pas, pourrais tu donner ton code de la page ?
Commenter la réponse de philippef
-1
Utile
1
merci.
en cherchant un peu j'ai trouvé.
j'essaie d'adapter mon site aux différentes résolutions d'écran.
pour les résolutions de grande taille mon menu est sur la gauche sans image de fond alors que pour les résolutions plus petites type Smartphone le menu tient sur une page avec une image de fond.
quand on arrive sur le site on arrive sur la page d'accueil et en haut j'ai un bouton pour afficher le menu.

le code du div caché

<div id="retourmenu">
<img src=""quot;images/retourmenu.jpg" alt="" onclick="javascript:menu();" ><span onclick="javascript:menu();">Menu</span>
</div>

le div où se trouve le menu

<div id="mainpage">
<div id="menu"><br />
<nav>
<ul>
<li><a href="index.php?page=accueil" rel="nofollow noopener noreferrer" target="_blank">Accueil</a></li>
</ul>
</nav>
</div>
<div id="contenu" class="clearfix">
</div>

la fonction qui agrandit le menu de gauche sur la largeur de l'écran

function menu(){
document.getElementById('menu').style.width = "100%";
document.getElementById('menu').style.textAlign = "center";
document.getElementById('menu').style.fontSize = "1.3em";
document.getElementById('menu').style.backgroundImage = "url(images/parchemin2.jpg)";
document.getElementById('menu').style.backgroundSize = "100%";
document.getElementById('menu').style.backgroundRepeat = "no-repeat";
document.getElementById('menu').style.display = "inline";
document.getElementById('contenu').style.width = "0%";
document.getElementById('contenu').style.display = "none";
}


tout ça pour dire que ce qui manquait c'est backgroundSize = "100%";

Merci encore
Learn-iT 7 Messages postés mercredi 4 janvier 2017Date d'inscription 7 mars 2017 Dernière intervention - 5 janv. 2017 à 18:06
d'accord ça marche, bonne soirée ;)
Commenter la réponse de philippef