[RÉGLÉ] CSS : Logo en background-image adaptable

[marou]

Bonjour à tous,
J'ai un problème de logo sur lequel je tourne en rond depuis un p'tit moment.
Je veux rien faire de sorcier : juste une image, avec un lien, le tout dans une div, et que tout cela se redimensionne automatiquement selon la taille de l'écran.

J'ai essayé :
HTML
<div id="logo"><a href="index.php"><img src="/templates/montemplate/images/logo.png" /></a></div>
CSS
#logo { width: 50%; }
=>Tout s'affiche bien, mais apparemment l'image ne change pas de taille

J'ai essayé ensuite :
HTML
<div id="logo"><a href="index.php"></a></div>CSS
CSS
#logo { width: 50%; background: url(../images/logo.png) top left no-repeat; }
#logo a {width: 100%; display: block; }
=>Rien ne s'affiche

Ce que je souhaite faire est-il faisable ?
Si oui, comment ?
Où ai-je fais une bourde ?

Merci d'avance de votre aide, et bonne fin de journée à tous!

[toffffe]

Re : CSS : Logo en background-image adaptable

Salut
Normal il y a aucun css pour l'image
Il faut aussi lui mettre une class à ton image

[marou]

Re : CSS : Logo en background-image adaptable

Un grand merci pour ta réponse, mais peux-tu préciser , car je n'ai pas bien compris ta consigne.
Je dois mettre une classe pour quelle technique : la première décrite (l'image est dans le html) ? Ou la seconde (l'image est un background) ?
Et que dois-je mettre dans la classe ?

[Flagadouille]

Re : CSS : Logo en background-image adaptable

Tu fais un <div class=machin>ton image</div>
Et dans le CSS :
.machin{
Tu règle la position de l'image
}
Je sais pas si c'est ça ton problème mais c'est ce que j'ai compris.

[houba_houbi]

Re : CSS : Logo en background-image adaptable

Essayes avec ça

#logo img {
height: auto;
max-width: 100%;
}

[Flagadouille]

Re : CSS : Logo en background-image adaptable

Ou au pire tu le met en absolute si il veut pas se placer. Vu que c'est un logo c'est pas gênant. par exemple :
#logo img {
position:absolute;
left: (x)px;
right: (y)px;
}
Enjoy

[toffffe]

Re : CSS : Logo en background-image adaptable

Pour info houba_houbi t'as donné la réponse, même si j'aurais plutôt ajouté une class sur l'image car sinon le css va s'ppliquer sur toutes les images du siteavec un code css du style

img.classimg {
width: 100%;
max-width: 400px;
min-width: 120px;}

[toffffe]

Re : CSS : Logo en background-image adaptable

et bien entendu un html :
<img class="classimg" src="..." alt="..." />

Attention ce n'est pas la même chose pour rendre une image en background responsive. La technique est beaucoup plus longue et complexe

[marou]

Re : CSS : Logo en background-image adaptable

Merci houbba !
Cela donne exactement ce que je souhaitais : l'image rapetisse si je réduit ma fenêtre de navigateur.

Et pour te rebondir sur ce que tu dis tofffe : Je croyais (naivement surement) qu' un template où tout est exprimé en % et en em, bref un truc qui glisse, c'était ça du responsive design. Du moins une première étape. Il me semble après qu'il faut utiliser des medias querry, mais je n'ai pas encore creusé.

Je met le sujet sur réglé, mais si tu as le temps/l'envie pour quelques explications supplémentaires, je suis pour. Parce que j'ai lu des tonnes d'articles, et c'est encore assez flou (en plus je suis une bille en anglais!)

Merci en tout cas pour votre aide à tous les 3!!!

[Flagadouille]

Re : CSS : Logo en background-image adaptable

Je peux pas exactement t'expliquer le responsive je ne l'utilise pas. Sa fait n'importe quoi dès qu'on place de l'absolute ou du fixed

[kursus]

Re : CSS : Logo en background-image adaptable

@flagadouille C'est sympa de vouloir aider mais essaye de le faire quand tu connais le sujet. Parce que là sur tes 3 interventions il y en a une hors-sujet, une erronée et une qui est une ânerie pas possible.

[Flagadouille]

Re : CSS : Logo en background-image adaptable

Ok, pas de soucis.