Adapter la largeur d'une image à la taille de l'écran

Résolu

philippef -
Learn-iT Messages postés 7 Date d'inscription Statut Membre 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

A voir également:

Css adapter image taille écran
Comment réduire la taille d'un fichier - Guide
Reduire taille image - Guide
Double ecran - Guide
Taille 32x32 correspondance ✓ - Forum Loisirs / Divertissements
Capture d'écran whatsapp - Accueil - Messagerie instantanée

3 réponses

Réponse 1 / 3

Learn-iT Messages postés 7 Date d'inscription Statut Membre Dernière intervention 1

Bonjour,

Essaye avec un width : auto

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

Facebook : https://www.facebook.com/learnitFR/

Réponse 3 / 3

philippef

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 Messages postés 7 Date d'inscription Statut Membre Dernière intervention 1

d'accord ça marche, bonne soirée ;)

Discussions similaires

image qui s'adapte à la taille de l'écran

Ajustement automatique taille de la page

Comment coder la taille des boutons coté html ?

Changer la taille d'un seule input

comment agrandir une image en css

Agrandir Button (input) en CSS

Votre réponse

Discussions similaires