Bonjour ! 

Je débute en codage et j'ai un projet à réaliser à partir d'une maquette (donc désolé d'avance des fautes dans le code et des nombreuses difficultés que je risque d'avoir !).

J'ai un header avec une image de fond, qui ne veut tout simplement pas s'afficher quand je tente de l'intégrer avec mon code SCSS. Elle veut bien s'afficher lorsque je la passe dans mon code HTML mais j'ai appris à mettre les images de taille assez importante dans la feuille SCSS (ce qui est le cas ici). Il me semble aussi que mettre les images sont plus gérables lorsqu'elles sont intégrées dans le SCSS directement, non ?

Mon code HTML ressemble à ça : 

<header>
      <nav>
        <div class="nav-logo">
          <h3>Resto</h3>
        </div>
        <ul class="nav-elements">
          <li>Home</li>
          <li>Reservations</li>
          <li>Menu</li>
          <li>Blog</li>
          <li>Pages</li>
          <li>Shop</li>
          <li>Contact</li>
        </ul>
        <div class="nav-logos">
          <i class="fa-brands fa-facebook-f"></i>
          <i class="fa-brands fa-twitter"></i>
          <i class="fa-brands fa-instagram"></i>
        </div>
      </nav>
      <div class="header-text">
        <div>
          <h2>Welcome to</h2>
          <h1>The resto</h1>
          <img src="./assets/img/ic-plate-big.png" alt="big cuttlery logo" />
          <h6>We serve only the freshest ingredients !</h6>
        </div>
      </div>
    </header>

et le SCSS ressemble à ça : 

header {
  color: $white1;
  height: 80vh;

  nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px 30px;

    .nav-logo {
      @include title-allura;
      font-size: 1.8rem;
      color: $white1;
    }

    .nav-elements {
      @include title-poppins;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font-weight: 300;
      font-size: 0.8rem;
      width: 80%;

      li {
        cursor: pointer;
        transition: 0.2s ease-in-out;

        &:hover {
          transform: scale(1.1);
        }
      }
    }

    .nav-logos {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 10%;

      i {
        font-size: 0.8rem;
        cursor: pointer;
        transition: 0.2 ease-in-out;

        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }

  .header-text {
    text-align: center;
    margin: 70px auto;

    h2 {
      @include title-allura;
      font-size: 2.5rem;
      font-weight: 500;
    }

    h1 {
      @include title-poppins;
      font-size: 3rem;
      letter-spacing: 10px;
    }

    h2,
    h1 {
      line-height: 0.9;
    }

    img {
      margin: 50px auto;
      width: 3%;
      height: auto;
    }

    h6 {
      font-family: $font3;
      text-transform: uppercase;
      color: rgba(250, 250, 250, 0.7);
      letter-spacing: 7px;
      font-weight: 200;
      font-size: 0.7rem;
    }
  }
}

J'ai vérifié plusieurs fois et le chemin vers mon image est juste. C'est étrange parce que ce n'est pas la première fois que je mets un background, j'ai réutilisé le même principe, la seule différence étant que les autres fois le background s'appliquait à toute la page et non pas juste au header. 

J'ai le même souci pour la suite de mon code... J'ai un grid en grid-template-columns 50% 50%, la partie droite du grid doit simplement être une image. Mon grid s'affiche, j'ai réussi à faire la partie gauche comme je le souhaite mais toujours le même problème avec l'image pour la droite. 

Les propriétés de style s'affichent dans ma feuille CSS ET dans le panneau de contrôle de Chrome donc je ne vois vraiment pas où peut être le problème. 

J'ai essayé de faire une classe "background-img" dans le HTML, en y mettant directement la balise img. Ca fonctionne à peu près, mais du coup je dois placer le header en position relative etc et l'image dépasse de partout... Pas du tout ce que je veux faire en soit...

Je ne suis malheureusement pas à l'origine de la maquette, je pense donc que je vais devoir m'abstenir de vous la montrer pour des raisons de droits d'auteur. 

J'espère que j'ai été plutôt claire et que quelqu'un pourra m'aider ! (et si jamais vous voyez des possibilités d'optimisation de mes codes, je suis preneuse !)

-
Edité par LL82 14 novembre 2023 à 15:43:12

Bonjour,

ton code scss ne contient pas de background du tout. Aurais-tu oublié de l'ajouter au moment de nous le montrer ?

Bonjour ! 

Il en a un, je travaille avec les layouts donc il est dans mes settings (je n'avais pas pris ce détail en compte, désolé !)

body {
  background-color: $grey1;
  text-align: center;
}

J'ai modifié ce point dans mes settings et ensuite mis background puis background-image dans mon header mais rien n'a bougé. 

Je pense que le souci n'est pas en lien avec le header spécifiquement, j'ai essayé d'intégrer d'autres images en arrière plan sur d'autres parties de mon code et j'ai le même problème là aussi. 

Est-ce que tu peux montrer le code CSS généré, pas le SCSS avec des variables ?

Et aussi une capture d'écran de ton arborescence de travail ?

Il se peut que le CSS cherche l'image à un endroit où elle n'est pas.

À noter que :

> j'ai appris à mettre les images de taille assez importante dans la feuille SCSS (ce qui est le cas ici). Il me semble aussi que mettre les images sont plus gérables lorsqu'elles sont intégrées dans le SCSS directement, non ?

Ce n'est pas vraiment le cas : les images vont dans le CSS quand elles sont de la décoration uniquement. C'est-à-dire qu'elles n'apportent pas de sens. On peut mettre des images de décoration ou d'illustration dans le HTML, mais sans oublier le alt, attribut obligatoire (qui sera vide, dans le cas d'une décoration, c'est important).

Alors voilà le CSS (pour gagner quelques lignes, j'ai retiré mes font-face et je n'ai mis que le header) : 

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
}

body {
  background: rgb(33, 32, 30);
  text-align: center;
}

button {
  font-family: "poppins", sans-serif;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
  background: none;
  outline: none;
  border: none;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
button:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

header {
  color: rgb(250, 250, 250);
  height: 80vh;
}
header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 20px 30px;
}
header nav .nav-logo {
  font-family: "allura", sans-serif;
  color: rgb(163, 112, 69);
  font-size: 1.8rem;
  color: rgb(250, 250, 250);
}
header nav .nav-elements {
  font-family: "poppins", sans-serif;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  font-weight: 300;
  font-size: 0.8rem;
  width: 80%;
}
header nav .nav-elements li {
  cursor: pointer;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
header nav .nav-elements li:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
header nav .nav-logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 10%;
}
header nav .nav-logos i {
  font-size: 0.8rem;
  cursor: pointer;
  -webkit-transition: 0.2 ease-in-out;
  transition: 0.2 ease-in-out;
}
header nav .nav-logos i:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
header .header-text {
  margin: 70px auto;
}
header .header-text h2 {
  font-family: "allura", sans-serif;
  color: rgb(163, 112, 69);
  font-size: 2.5rem;
  font-weight: 500;
}
header .header-text h1 {
  font-family: "poppins", sans-serif;
  text-transform: uppercase;
  font-size: 3rem;
  letter-spacing: 10px;
  line-height: 35px;
}
header .header-text img {
  margin: 50px auto;
  width: 3%;
  height: auto;
}
header .header-text h6 {
  font-family: "roboto", sans-serif;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.7);
  letter-spacing: 7px;
  font-weight: 200;
  font-size: 0.7rem;
}

Voilà l'organisation de mon dossier (ici aussi dans un souci de place je n'ai pas ouvert le dossier img, il y a beaucoup d'images) :

> Ce n'est pas vraiment le cas : les images vont dans le CSS quand elles sont de la décoration uniquement. C'est-à-dire qu'elles n'apportent pas de sens. On peut mettre des images de décoration ou d'illustration dans le HTML, mais sans oublier le alt, attribut obligatoire (qui sera vide, dans le cas d'une décoration, c'est important).

Donc en fait il est plus intéressant de tout mettre dans le HTML avec des classes (lorsque c'est pertinent) ? Est-ce que les images sont plus simples à gérer dans ce cas là (du point de vu placement, dimension etc) ? 

Faire cela ne pose pas de problème par rapport au SEO ? 

Je prends bonne note de toutes ces explications en tout cas ! Merci !

Je crois qu'on ne se comprend pas. Dans le code que tu montres, il n'y a aucune mention d'image… L'idée c'est de savoir ce que tu as fait et qui ne marche pas, pour pouvoir t'aiguiller vers la solution.

Au vu de ton arborescence, pense bien à remonter d'un cran pour pouvoir passer du dossier "styles" au dossier "img". (exemple : "../img")

> il est plus intéressant de tout mettre dans le HTML

Non. Plus précisément, "non, pas tout". Dans le CSS ne vont que les images de décoration, qui n'ont pas de sens sémantique, qui pourraient être omises sans qu'on perde de l'information. Dans le HTML vont les images d'illustration (non essentielles, non informatives, mais les mettre dans le CSS serait vraiment complexe) et les images informatives (si tu montres une photo de paysage pour dire que tu as fait une bonne balade, c'est pertinent de mettre cette image dans le HTML et de lui mettre un attribut "alt" décrivant l'image).

J'avais simplement mis 

header {
  color: rgb(250,250,250) ;
  height: 80vh;
  background-image: url(../../img/bg-slider-06.jpg) center/cover no-repeat;

// le reste de mon code

J'ai bien pensé à remonter un cran à chaque fois dans mon dossier, j'ai bien la liste de mes images qui s'affiche quand je cherche l'url.

J'ai passé l'image en question dans le HTML, elle s'affiche finalement. Je vais devoir refaire une bonne partie de mon code du coup ^^' 

Le problème viendrait alors du fait que j'avais mis l'image tout de suite dans le CSS et non pas dans le HTML ? 

-
Edité par Lamecarlate 17 novembre 2023 à 10:48:32

J'ai passé les images d'illustrations dans le HTML, ça a l'air plus simple pour l'instant (enfin, à grands coups de position relative et absolute, c'est pas du tout responsive par contre ^^')

A force d'essayer plein de trucs je vais finir par y arriver !

Je laisse le sujet ouvert pour le moment, au cas où.

Merci pour l'aide !

-
Edité par LL82 17 novembre 2023 à 11:53:11

Justement, te voilà obligé de bidouiller dans le html pour mettre une image de fond

Essaie avec "../img" ? Puis : est-ce que tu pourrais ouvrir ton inspecteur de code, à l'onglet Réseau ? Puis vider l'onglet (tu dois avoir un bouton pour ça, souvent c'est une poubelle ou un rond barré), et recharger la page ? Tu devrais avoir une erreur, et ça te donnera l'adresse exacte attendue par le css pour le fichier.

Bonjour ! 

J'ai essayé avec "../img" et ça fonctionne pour l'instant, j'ai pu remettre mon html d'origine. Toutes mes images ont l'air de plutôt bien s'afficher et de se mettre en place maintenant.

Je ne comprends pas trop pourquoi "../img" fonctionne et pas "../../img" alors qu'en soit je vise le même dossier ? Surtout qu'en ne mettant que "../img" je me retrouve à devoir taper à la main le nom de mes fichiers jpg 

c'est la position de style.css (compilé) qui importe

Voilà pourquoi. C'est ce qui importe pour le navigateur. Le navigateur ne connaît pas ton arborescence scss, la seule chose que tu lui fournis c'est le css.

Ensuite, pour ton auto-complétion, je ne sais pas comment tu peux configurer ton éditeur… Tu peux peut-être imaginer écrire une fonction scss pour ne fournir que le nom du fichier et compiler ça en "../img/nom-de-fichier.jpg" mais ça ne te rendra pas ton autocomplétion.