Pb Background-image

d4xtian
Les bases HTML/CSS

L'image de mon Background-image ne s'affiche pas.

      <div
        class="panel active"
        style="
          background-image: url
            (
              'https://ecomatin.net/wp-content/uploads/2019/09/ecomatin.net-afd-cud-ffem-bilan-du-projet-douala-ville-durable-douala-2019-780x405.jpg'
            );
        "
      >
        <h3>Douala</h3>
      </div>

Ce que je veux

Je cherche à afficher un image en background d'un texte..

Ce que j'obtiens

Le texte s'affiche mais pas l'image

J'ai vérifié le lien de l'image elle s'affiche bien, j'ai reverifié la syntaxe du code je ne vois pas d'erreur.

Merci

3 réponses

Nairolf
Réponse acceptée

C'est à cause des retours à la ligne avec url() Il faut fairecomme ceci:
background-image: url(https://ecomatin.net/wp-content/uploads/2019/09/ecomatin.net-afd-cud-ffem-bilan-du-projet-douala-ville-durable-douala-2019-780x405.jpg)

Bigor
Réponse acceptée

Ton code fonctionne correctement chez moi.

Et comme l'a dit @Nairolf, c'est du au retour à la ligne de l'élement passé à url().
Pour éviter la mise en forme automatique du code à ce niveau, au lieu de définir le style dans la balise div en même temps, tu peux créer un fichier main.css dans lequel tu applique le style voulu à l'élement en question.
Dans le fichier main.css tu peux écrire(En supposant que je veux mettre l'image en background de tout le body) :

   body {
            background-image:url('https://ecomatin.net/wp-content/uploads/2019/09/ecomatin.net-afd-cud-ffem-bilan-du-projet-douala-ville-durable-douala-2019-780x405.jpg');
    }
d4xtian
Auteur

OK, mais je n ai pas la possibilité de tester car mon VS Code le mait en forme automatiquement comment je peux le changer ?