L'image de fond n'apparaît pas

**laurentSc** · 28/10/2015, 23h26

Bonsoir,

je souhaite mettre une image de fond sur une div.

Voici le code :

Code html :

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

1
2
3
4
5
<div id="div-auth"> 
<form  action="authenticate2.php" method="post">
...
</form>
</div>

Code css :

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

1
2
3
4
#div-auth {	
background-image:url(images/Data_Centeranime.gif);
background-position:center center;
}

mais l'image n'apparaît pas. Comment la faire apparaître ?

**ABCIWEB** · 28/10/2015, 23h33

As-tu essayé des doubles quotes pour entourer l'adresse de l'image ?

**laurentSc** · 28/10/2015, 23h43

Je viens d'essayer mais pas mieux

**ABCIWEB** · 29/10/2015, 00h48

Alors c'est que le chemin relatif indiqué n'est pas le bon... Essaies de faire afficher cette même adresse dans une balise image pour voir.

**laurentSc** · 29/10/2015, 09h40

Je l'avais déjà fait, mais pour confirmation, j'ai recommencé et on voit bien l'image ; ta remarque sur le chemin relatif m'a fait penser que ça serait peut-être mieux avec un chemin absolu, mais pas mieux : background-image:url('localhost/eis/eis/images/Data_Centeranime.gif'). Comme c'est un gif animé, j'ai aussi fait l'essai avec une image fixe, mais ça veut pas non plus...

**Jacques Beauregard** · 29/10/2015, 10h48

Bonjour,

As-tu regardé si firebug affichait un 404 not found sur le GET de ton .gif?

**NoSmoking** · 29/10/2015, 12h53

Bonjour,
Attention : si on suppose que ton arborescence est du type

┣ [style]
┃   ┗ style.css
┣ [images]
┃    ┣ image_1.jpg
┃    ┗ image_2.jpg
┖ index.html

alors l'image est recherchée à partir du répertoire [style].

**laurentSc** · 29/10/2015, 14h57

Bonjour,

d'abord, c'est quoi le GET du gif ?

Ensuite, pour avancer et craignant les effets de bord, j'ai fait un fichier de test ultra-simple :

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
<!DOCTYPE html>
<html lang="fr">
<head>
 
<link href="http://localhost/eis/eis/css/style2.css" rel="stylesheet"/>
</head>
<body>
	<div id="div-auth">
 
<span class="colorred">Welcome on intranet website P&A</span>
 
 
	</div>
</body>
</html>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* background-image of the auth div*/
#div-auth {
 
position: absolute;	
background-image:url('http://localhost/eis/eis/images/Data_Centeranime.gif');
 
background-size: auto;
height:100%;
width:100%;
 
}
 
.colorred {
color:red;
}

Plusieurs remarques :
- 1 classe en plus pour vérifier que le fichier CSS est bien pris en compte
- l'adresse relative marche pas ; elle doit être absolue
- le div doit être positionné (en absolute car relative, l'image est rognée)

Donc j'arrive à faire marcher ça mais pas le fichier d'origine...

**Jacques Beauregard** · 29/10/2015, 15h57

- le div doit être positionné (en absolute car relative, l'image est rognée)

Ne serait-ce pas plutôt :

Code :

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

height:100%;

responsable d'une image rognée ? En effet si le conteneur de ton <div> (ton <body>) n'a pas de hauteur définit ?
Le GET du gif était simplement pour voir si dans la console de ton navigateur tu avais une ligne du style :

GET http://localhost/eis/eis/images/Data_Centeranime.gif 404 (Not Found)

Invité · 29/10/2015, 17h00

Code css :

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

background-image:url('../images/Data_Centeranime.gif');

Comme l'a dit NoSmoking, c'est le chemin relatif entre le fichier CSS et l'image qu'il faut mettre.

**laurentSc** · 29/10/2015, 23h10

+1 à tous les 2.

En mettant une dimension au body, relative=OK.
L'adresse relative, je croyais l'avoir déjà essayée, mais faut croire que non...

Enfin, j'ai pu mettre l'image de fond dans la page d'origine : comme le CSS n'est pas encore chargé, j'ai mis une balise style.

L'image de fond n'apparaît pas

CSS

Discussions similaires

Partager

Partager