[CSS] Images en css

Résolu/Fermé
-
Messages postés
68
Date d'inscription
jeudi 6 mai 2010
Statut
Membre
Dernière intervention
19 juillet 2014
-
Bonjour,

Je suis nouveau et je sais pas si je suis déjà dans le bon forum et je sais pas si cette question a été déjà posée.
Voilà mon problème : je voudrais afficher une image normale sur mon site internet par le css donc normalement nous avons un code comme celui là

Code CSS :

.lien
{
display:block;
width:100px;
height:100px;
background-image:url("xxxxx.png") no-repeat;
}


Code HTML :
<a href="un lien.lien" class="lien"></a>


Mais mon problème n'est pas là. C'est que je ne sais pas quoi mettre dans les xxxxx.png. J'ai essayé de mettre background-image: url("images/logo.png") mais cela n'a pas marché.
Alors j'aimerai savoir si j'ai peut être mal mit l'adresse de l'image sachant qu'elle se trouve dans "Mes Document" après dans "Bibliothèques" après dans "Images" et après dans images il y a mon logo.png.

J'espère que j'ai été assez clair,

Cordialement,

Alex.

3 réponses

Messages postés
591
Date d'inscription
lundi 22 février 2010
Statut
Membre
Dernière intervention
19 octobre 2013
49
salut,
ou se situe ton fichier html dans lequel tu veux afficher l'image par rapport au logo.png ?
Messages postés
68
Date d'inscription
jeudi 6 mai 2010
Statut
Membre
Dernière intervention
19 juillet 2014
1
Tu as 2 façons de faire un lien :
Relatif ou absolu.

Relatif : La position de logo.png par rapport au fichier html.
Ex. S'ils sont dans le même dossier :
url("logo.png")

Si le fichier html est dans "Bibliothèques" :
url("images/logo.png")


Absolu : Tu indique la position de l'image par rapport au dossier racine.
Ex. Si tu es en local sous windows par exemple :
 url("C:/..../Mes Documents/Bibliothèques/images/logo.png")


Si ton image est sur un site web, tu peux directement indiquer l'url de l'image.
Ex.
url("http://www.monsite.com/images/logo.png")


En espérant t'aider :)
Bonjour,

Merci de vos réponses. Il faut que mon fichier html soit dans le même dossier que mon image?

Cordialement,

Alex.
Messages postés
2465
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
8 juin 2016
227
Salut, et Non, comme il a été dit plus haut, il faut juste que tu connaisse l'emplacement de ton image par apport a ton fichier css...

Exemple 1 : si le fichier css se trouve dans le dossier A, et que l'image se trouve aussi dans le dossier A, alors : background-image:url("xxxxx.png") no-repeat;

Exemple 2 : si dans ce cas l'image se trouve dans un sous répertoire(se nomant B) du dossier A, alors : background-image:url("B/xxxxx.png") no-repeat;

Exemple 3 : si c'est le fichier css qui se trouve dans le sous repertoire B, alors background-image:url("../xxxxx.png") no-repeat;
Bonjour,

Justement. Je connais l'emplacement de mon fichier qui est dit dans le sujet principal (Mes documents, Bibliothèques, Images, Logo.png) mais cela ne marche pas quand je mets l'emplacement. L'emplacement de mon fichier css est Mes documents, Ordinateur, disque dur, design.css et l'emplacement de mon fichier html est dans Mes Documents, Ordinateur, Disque dure, fichier.html

Cordialement,

Alex
Messages postés
68
Date d'inscription
jeudi 6 mai 2010
Statut
Membre
Dernière intervention
19 juillet 2014
1
Est ce que tu as inclut ton fichier css dans l'en-tête HTML ?

Le lien doit être de cette forme et doit être entre les balises <head> :
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
Bonjour,

Oui. J'aimerai savoir : j'ai envoyé mon logo.png sur le serveur de mon hébergeur dans le même dossier que index.html, donc normalement c'est background-image:url("logo.png") no-repeat; ? Car moi ça marche pas.

Cordialement,

Alex
Messages postés
68
Date d'inscription
jeudi 6 mai 2010
Statut
Membre
Dernière intervention
19 juillet 2014
1
Oui, normalement ça devrait marcher..
Mais en même temps, pour faire une image cliquable, le plus simple est de faire :
<p>
<a href="lien.html">
<img src="logo.png" alt="Logo de mon site" >
</a>
</p>


Essaye avec ce code, on sait jamais. En plus tu n'a même pas besoin de css :)