Bonjour,

Je suis très débutante en webmastering (et formée uniquement par les tutoriels du web) et j'ai deux petits soucis:

1/ J'utilise deux images en background pour faire des interlignes entre certaines aires de ma page entre des balises
<div>
, avec
repeat-x
.
J'avais crée rapidement deux images au début pour faire des tests et cela fonctionnait bien sur bluegriffon. Mais je voudrais corriger ces images et leur ajouter de la transparence.

Or, dès que j'enregistre/exporte une nouvelle image (soit l'image de départ modifiée (ou non), soit une nouvelle création via gimp (ou même paint); avec les mêmes propriétés)... puis que je la place dans
background-image: url("")
; (dans me feuille css), celle-ci ne s'affiche plus. (ni en jpg, ni en png ni en gif). Si je remets une de mes deux images de départ, cela fonctionne à nouveau.
Pour info: si je place l'image corrigée sur la page html avec les balise
<img>
(et non dans la feuille css): ça marche bien!

2/ Cependant, si les deux image test de départ s'affichent bien sur bluegriffon, s'affichent également quand j'ouvre ma page html sur firefox, il n'y a plus trace d'elles, quand je mets tout ça en ligne via mon hébergeur.

Je tourne en rond depuis trop longtemps avec ce truc Smiley biggol , alors je fais appel à votre aide! Smiley confused quelqu'un s'est-il un jour trouvé confronté à cette même bizarrerie et a-t-il réussi à s'en dépatouiller?

Merci d’avance à vous !
Modérateur
Bonjour,

1) il faut vider soigneusement le cache des navigateurs utilisés (ou faire une rafraichissement de page tout en appuyant sur la touche "Shift" du clavier),

2) il y a surement une erreur dans le code.

Amicalement,

EDIT: attention aussi au nom des images (bien respecter les chemins, les minuscules et majuscules, certaines machines ne font pas la différence, mais d'autres la font).
Modifié par parsimonhi (18 Nov 2020 - 19:59)
Merci parsimonhi

J'ai rafraîchi plusieurs fois la page pour voir afficher le favicon (et même la mise en forme contenue sur la feuille de style sur mon mobile qui ne la chargeait pas)
Aucun effet sur les background-image.

Concernant le code, le voici:
Je viens d'incorporer le style de ces images de background dans la page html (et non dans la feuille de style) et cela fonctionne (sur bluegriffon)

<head>
<style> 
      .inter1 {
        background-image: url("images/inter1.png");
        background-repeat: repeat-x;
        height: 11px;
      }
    </style>
  
  <body><br>
    <body>
      <div class="inter1"> </div>
</body>

=> fonctionne!

Par contre si je place la même chose dans la stylesheet extérieure, cela ne fonctionne pas.
<head>
 <link rel="preload" type="text/css" href="styles/style1.css">
<link rel="stylesheet" type="text/css" href="styles/style1.css">
</head>
<body>
      <div class="inter1"> </div>
</body>


.inter1 {
        background-image: url("images/inter1.png");
        background-repeat: repeat-x;
        height: 11px;
      }

=> Ne fonctionne pas! ??
Modifié par Bluephyton-Gimp-user (18 Nov 2020 - 20:14)
Modérateur
Bonjour,

Le chemin de l'image est un chemin relatif entre le css et l'image.

Il semble que ton fichier css soit dans un sous répertoire. L'instruction css, lorsqu'elle est dans le fichier style1.css, devrait donc être, si mes déductions sont justes :
.inter1 {
        background-image: url("../images/inter1.png");
        background-repeat: repeat-x;
        height: 11px;
      }


Amicalement,
Bonjour ! comment faire pour vider un cache et s'assurer que ça a fonctionné ? le genre de chose que je ne sais pas faire lorsqu'il faut le faire, pourtant, merci par avance Smiley cligne