background-image en CSS

**laurentSc** · 28/10/2020, 14h38

Bonjour,

je travaille actuellement à mettre à jour un vieux code. Notamment, il comporte un <td style="background-image: url(./image/image_grisee.jpg);background-size: 100%; "> que j'ai voulu remplacer par une classe CSS : <td class="bkgimggrisee"> avec

Code css :

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

1
2
3
4
.bkgimggrisee {
    background-image: url(./image/image_grisee.jpg);
    background-size: 100%;
}

Mais avec le 2e code, il n'y a pas d'image de fond. Pourquoi ?

**ProgElecT** · 28/10/2020, 16h24

Code :

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

background-image: url("./image/image_grisee.jpg");

**laurentSc** · 28/10/2020, 17h12

J'ai bien rajouté, comme indiqué, les guillemets oubliés.
Mais le style n'est toujours pas pris en compte...si je le déclare dans une feuille de style externe. Mais il l'est bien, si je le déclare dans le head du fichier concerné. Pourtant, la feuille de style externe est bien déclarée (<link rel="stylesheet" type="text/css" href="./css/style.css" />) vu que d'autres classes CSS sont bien prises en compte. Qu'est-ce qui peut expliquer ça ?

**ProgElecT** · 28/10/2020, 18h05

Re

Mes déclarations pour les CSS externe je les passe de cette façon, dans la partie <head>,
<link href="style.css" rel="stylesheet"> donc légèrement différemment que toi, je ne précise pas le type="text/css".

Édit:
Je viens d'essayer en rajoutant le type, pas de modification.
Dans la console, le fichier CSS et bien chargé, pas de message d'erreur console ?

**laurentSc** · 28/10/2020, 19h11

Première fois que je consulte la console, ne maîtrisant pas ces outils de développement (je travaille avec Firefox). Donc, j'ai été voir les messages d'erreur et il y en a un qui porte justement sur l'image :

Code :

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

1
2
http://dev.dvp.fr/flexi2202/commande211020/css/image/image_grisee.jpg
[HTTP/1.1 404 Not Found 14ms]

Normal, vu que l'URL de l'image (je suis en local) est http://dev.dvp.fr/flexi2202/commande211020/image/image_grisee.jpg (avec un css/ en moins).

Cela vient peut-être de la déclaration de l'emplacement de la feuille de style externe, non ? <link rel="stylesheet" type="text/css" href="./css/style.css" />

**ProgElecT** · 28/10/2020, 19h24

Re

Il faut que ton chemin relatif soit identique sur le serveur comme sur ton local,

vu que d'autres classes CSS sont bien prises en compte

mais là cela est contradictoire.

**laurentSc** · 28/10/2020, 21h29

J'ai compris

et y avait pas contradiction, vu que c'était la règle CSS qui était fausse : quand j'écris

Code css :

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

1
2
3
4
5
 
.bkgimggrisee {
    background-image: url("./image/image_grisee.jpg");
    background-size: 100%;
}

le chemin relatif est pris par rapport au fichier CSS si fichier CSS externe et par rapport au fichier PHP (ou HTML) si on déclare le style dans le head du fichier. D'où ce qui se passait, vu que l'arborescence est :

appli.php (le fichier qui contient le code)
css
    style.css
image
    image_grisee.jpg

C'est pourquoi la règle est bonne si je la mets dans le head de appli.php mais si je la mets dans le fichier style.css, il fallait coder :

Code :

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

1
2
3
4
5
 
.bkgimggrisee {
    background-image: url("../image/image_grisee.jpg");
    background-size: 100%;
}

Le tour est joué !

background-image en CSS

CSS

Discussions similaires

Partager

Partager