Affichage du fond, simple mais énervant

**master500** · 06/03/2014, 17h03

Bonjour je vous explique mon problème, c'est honteux mais je ne trouve pas alors que j'ai déjà regardé plusieurs forum et autres site mais rien ne marche, rien du tout: je ne peux pas afficher d'image à partir du code CSS alors que pour mon menu les images s'affichent très bien. j'ai tout essayé, j'ai tout d'abord créée une classe (je vous montre seulement la partie du code qui nous intéresse).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="bannniere">
test
</div>

(même avec id ça ne fonctionne pas non plus) et voici mon code CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.banniere{
	position: absolute;
	right:20%;
	background: url("en_tete_test.png");
}

j'ai essayé background-image aussi mon image se trouve dans le même dossier que mon fichier css, elle est bien en format png. j'ai aussi essayé de placer l'image dans un autre fichier mais rien n'y fait ça ne marche pas.
Merci d'avance.

**Bovino** · 06/03/2014, 17h59

mon image se trouve dans le même dossier que mon fichier css

Oui, mais sont-ils dans le même dossier que le fichier HTML qui affiche la page ?

**NoSmoking** · 06/03/2014, 18h05

Bonjour,
attention également au fait que la DIV étant en position:absolute celle ci n'occupe que la place nécessaire à son contenu, à défaut d'un dimensionnement.

[EDIT] tiens au passage bannniere avec 3 n ?

**master500** · 06/03/2014, 18h25

Oui, mais sont-ils dans le même dossier que le fichier HTML qui affiche la page ?

Oui les 3 fichiers sont dans le même dossier

Bonjour,
attention également au fait que la DIV étant en position:absolute celle ci n'occupe que la place nécessaire à son contenu, à défaut d'un dimensionnement.
tiens au passage bannniere avec 3 n ?

J'ai supprimé position absolute et corrigé "bannniere" mais rien ne se passe non plus

PS : le "test" s'affiche sous un fond rouge (le fond de ma bannière) mais quand je supprime test rien apparaît
C'est quand même incroyable de pas réussir à afficher une image mais la je comprend pas du tout d'où vient le problème surtout que d'autres images sont affichées.

**NoSmoking** · 06/03/2014, 18h38

tu as pris en compte cette remarque

[EDIT] tiens au passage bannniere avec 3 n ?

**master500** · 06/03/2014, 18h49

et corrigé "bannniere" mais rien ne se passe non plus

oui je l'ai prix en compte mais ça ne change rien

**NoSmoking** · 06/03/2014, 19h01

j'ai visiblement pas tout lu...
Si tu es sûr de la position des tes images alors...

PS : le "test" s'affiche sous un fond rouge (le fond de ma bannière)

là je dois admettre que cela m'interpelle, le fond est rouge ou est ce une image?

teste avec

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Background]</title>
<style>
.banniere{
    position: absolute;
    right:20%;
    height:90px;
    width:216px;
    background-image: url(http://www.developpez.net/template/images/logo.png);
    background-color: #EEF;
}
</style>
</head>
<body>
<div class="banniere">
  test
</div>
</body>
</html>

**master500** · 06/03/2014, 20h29

Oui l'image s'affiche mais est-ce que tu peux m'expliquer pourquoi ? et quand je remplace par mon image il m’affiche un carré rouge de la taille de l'image developpez. J'ai donc remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
    height:144px;
    width:825px;

(les dimension de mon image) ça marche mais ça veut dire que je devrai faire ça à chaque image que je voudrai insérer une image ?

**Bovino** · 07/03/2014, 07h50

Bah oui... une image de fond, ce n'est pas un élément comme une balise <img>, c'est un élément de mise en forme d'une balise. Si la balise qui reçoit cette image est vide ou n'a pas les dimensions suffisantes, elle ne pourra pas s'afficher correctement.

Affichage du fond, simple mais énervant

CSS

Discussions similaires

Partager

Partager