Modifier la taille d'une "background-image:url()" en CSS [Résolu]

Messages postés
26
Date d'inscription
lundi 25 avril 2005
Statut
Membre
Dernière intervention
5 janvier 2008
- - Dernière réponse :  caroline - 2 avril 2015 à 13:32
Bonjour à tous,


Je ne savais où poster cette question mais j'espère que vous pourrez quand même m'aider.
J'aimerais faire un menu en CSS avec une image de fond dans le menu :


div#menu {
float:left;
width:10%;
height:80%;
background-image:url(".\images\eiffel_tower.jpg");
}


Le problème c'est que l'image ne s'adapte pas à la partie "menu". Elle est trop grande et on ne la voie donc pas entièrement. J'aimerais donc savoir comment faire pour modifier la taille de cette image dans mon menu CSS. Y'a t'il une commande genre : background-image:url(".\images\eiffel_tower.jpg"), width:  800 ; height : 150 ;  

Prototype51
Afficher la suite 

9 réponses

Meilleure réponse
Messages postés
2268
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
13 septembre 2013
3
3
Merci
Salut!
Tu peux utiliser PHP pour autant que les valeurs width et height de ton images soient définies dans le fichier .php et non dans le .css (car du php dans un .css appelé avec link n'est pas inteprêté):
Regarde mes réponses ici:
http://www.phpcs.com/infomsg_RESTRICTION-TAILLE_805681.aspx

Ensuite, tu modifies les valeurs de width et height! :)

@++

R@f

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 191 internautes nous ont dit merci ce mois-ci

Commenter la réponse de coockiesch
Messages postés
449
Date d'inscription
jeudi 26 août 2004
Statut
Membre
Dernière intervention
5 mars 2009
0
Merci
Pas que je sache. Tourne toi vers javascript ou comme je l'avais indique sur un topic y a 2 jours, vers ajax et php (avec la lib GD) pour le redimmensionnement automatique. C'est la seule solution que je vois.

@+
Commenter la réponse de cs_jean84
Messages postés
10843
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
17
0
Merci
Hello,

on ne peut pas modifier la taille d'une image en background d'un élément.
Commenter la réponse de malalam
Messages postés
10843
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
17
0
Merci
Précision : ici, les attributs width et height font références au contenant (le div), pas à l'image.
Commenter la réponse de malalam
Messages postés
26
Date d'inscription
lundi 25 avril 2005
Statut
Membre
Dernière intervention
5 janvier 2008
0
Merci
Merci Raf ; ce n'est pas exactement ce que je cherchais, mais je vais me débrouiller avec ça.
Commenter la réponse de Prototype51
Messages postés
10
Date d'inscription
lundi 21 juillet 2003
Statut
Membre
Dernière intervention
28 octobre 2006
0
Merci
dans ton

div#menu {
float:left;
width:10%;
height:80%;
background-image:url(".\images\eiffel_tower.jpg");
}

il suffit d'ajouter une nouvelle information:

div#menu img{
width:100%;
height:100%;
}

Dans ce cas là tu peux définir la taille de ton img précisement en % ou PX.
Pour l'affichage ça donne ça:

ton contenu ici
Commenter la réponse de jonathanrocchio
Messages postés
1
Date d'inscription
dimanche 21 mai 2006
Statut
Membre
Dernière intervention
8 février 2010
0
Merci
Commenter la réponse de hicham285
0
Merci
avec ça, ça fonctionne :
background:url("tonpng.png") center;
background-size: cover;


micmic
Commenter la réponse de micmic
0
Merci
Bravo et MERCI !
Les informations sont claires. Super !

http://www.quebecconcoursgratuits.com
Commenter la réponse de caroline