Modifier la taille d'une "background-image:url()" en CSSRésolu

Question

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

coockiesch · Accepted Answer

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

cs_jean84 · Answer

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.

@+

malalam · Answer

Hello,

on ne peut pas modifier la taille d'une image en background d'un élément.

malalam · Answer

Précision : ici, les attributs width et height font références au contenant (le div), pas à l'image.

Prototype51 · Answer

Merci Raf ; ce n'est pas exactement ce que je cherchais, mais je vais me débrouiller avec ça.

jonathanrocchio · Answer

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

hicham285 · Answer

micmic · Answer

avec ça, ça fonctionne :

background:url("tonpng.png") center;
background-size: cover;


micmic

caroline · Answer

Bravo et MERCI !
Les informations sont claires. Super ! 

http://www.quebecconcoursgratuits.com

Modifier la taille d'une "background-image:url()" en CSS

9 réponses

Votre réponse

Discussions similaires