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

Signaler
Messages postés
26
Date d'inscription
lundi 25 avril 2005
Statut
Membre
Dernière intervention
5 janvier 2008
-
 caroline -
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

9 réponses

Messages postés
2268
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
13 septembre 2013
3
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

Messages postés
449
Date d'inscription
jeudi 26 août 2004
Statut
Membre
Dernière intervention
5 mars 2009

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.

@+
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
22
Hello,

on ne peut pas modifier la taille d'une image en background d'un élément.
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
22
Précision : ici, les attributs width et height font références au contenant (le div), pas à l'image.
Messages postés
26
Date d'inscription
lundi 25 avril 2005
Statut
Membre
Dernière intervention
5 janvier 2008

Merci Raf ; ce n'est pas exactement ce que je cherchais, mais je vais me débrouiller avec ça.
Messages postés
10
Date d'inscription
lundi 21 juillet 2003
Statut
Membre
Dernière intervention
28 octobre 2006

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
Messages postés
1
Date d'inscription
dimanche 21 mai 2006
Statut
Membre
Dernière intervention
8 février 2010

avec ça, ça fonctionne :
background:url("tonpng.png") center;
background-size: cover;


micmic
Bravo et MERCI !
Les informations sont claires. Super !

http://www.quebecconcoursgratuits.com