background-image en CSS

Version imprimable

28/10/2020, 14h38
laurentSc

background-image en CSS
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:

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 ?
28/10/2020, 16h24
ProgElecT

Code:

background-image: url("./image/image_grisee.jpg");
28/10/2020, 17h12
laurentSc

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 ?
28/10/2020, 18h05
ProgElecT

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 ?
28/10/2020, 19h11
laurentSc
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:

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" />
28/10/2020, 19h24
ProgElecT

Re

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

Citation:

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

mais là cela est contradictoire.
28/10/2020, 21h29
laurentSc
J'ai compris :ccool: et y avait pas contradiction, vu que c'était la règle CSS qui était fausse : quand j'écris
Code:

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:

1 2 3 4 5 .bkgimggrisee { background-image: url("../image/image_grisee.jpg"); background-size: 100%; }
Le tour est joué ! :ccool: