[CSS] Images en css

Résolu/Fermé

Alex - 29 avril 2011 à 19:53
Lumpy-Rock Messages postés 68 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 19 juillet 2014 - 30 avril 2011 à 19:52

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.

A voir également:

[CSS] Images en css
Des images - Guide
Images enregistrées - Forum Blender
Ou sont enregistrées les images ✓ - Forum Bluetooth
Css exposant ✓ - Forum CSS
Enlever couleur lien css ✓ - Forum CSS

3 réponses

Réponse 1 / 3

Utilisateur anonyme
29 avril 2011 à 21:29

salut,
ou se situe ton fichier html dans lequel tu veux afficher l'image par rapport au logo.png ?

Réponse 2 / 3

Lumpy-Rock Messages postés 68 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 19 juillet 2014 1
Modifié par Lumpy-Rock le 29/04/2011 à 23:02

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 :)

Réponse 3 / 3

Alex
30 avril 2011 à 00:26

Bonjour,

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

Cordialement,

Alex.

JooS Messages postés 2468 Date d'inscription mardi 22 janvier 2008 Statut Membre Dernière intervention 8 juin 2016 228
Modifié par JooS le 30/04/2011 à 01:17

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;

Alex
Modifié par Alex le 30/04/2011 à 11:12

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

Lumpy-Rock Messages postés 68 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 19 juillet 2014 1
30 avril 2011 à 11:48

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" />

Alex
30 avril 2011 à 12:07

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

Lumpy-Rock Messages postés 68 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 19 juillet 2014 1
30 avril 2011 à 13:04

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 :)

Discussions similaires

trait horizontal avec du css

calcule nombre des pixels "noir" dans un image (noir/blanc)

Enlever le soulignement sous les liens en HTML/CSS

HTML - définir taille bouton

[CSS] Forcé retour à la ligne