web-dev-qa-db-fra.com

HTML et CSS Image d'arrière-plan ne s'affiche pas

J'ai déjà vérifié deux fois mon URL et le nom des fichiers, mais je n'arrive pas à faire en sorte que l'image apparaisse. Pourquoi c'est comme ça? Voici mon code (notez que le <p> est à l'intérieur des balises body, je n'ai pas ajouté le code complet, j'ai seulement ajouté la tête et le problème spécifique).

<html>
  <head>
     <title>Head First Lounge.</title>
      <link type="text/css" 
            rel="stylesheet" 
            href="stylesheet/style.css" 
            media="screen"/>
  </head>


<p class = "guarantee">
     Our guarantee: at the lounge, we're committed to providing you, 
     our guest, with an exceptional experience every time you visit.
     Whether you're just stopping by to check in on email over an 
     elixir, or are here for an out-of-the-ordinary dinner, you'll 
     find our knowledgeable service staff pay attention to every detail. 
     If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>

Et voici la règle CSS pour cette partie

.guarantee{         
        background-image: url(images/background.gif);
        font-family: "Geogia", "Times New Roman", Times, serif;
        border-color: black;
        border-width: 1px;
        border-style: solid;
        background-color: #a7cece;
            padding: 25px;
            margin: 30px;
            line-height: 1.9em;
            font-style: italic;
            color: #444;
}
htmlcsshtml5web
8
user962206

Essaye ça:

background-image: url(../images/background.gif);

Sans le ../, il recherche un dossier d'images dans le dossier de votre feuille de style qui n'existe pas. Vous devez donc revenir en arrière dans un répertoire où se trouve le dossier images.

Éditer : Vous pouvez aussi raccourcir vos styles CSS de la manière suivante:

.guarantee{
    background: #a7cece url(../images/background.gif);
    border: 1px solid black;
}
33
Drew

Le navigateur recherchera l'image dans votre répertoire de feuilles de style pour le moment.

Peut-être la peine d'essayer de changer

background-image: url(images/background.gif);

à

background-image: url(/images/background.gif);

qui pourrait être la cause du problème.

2
KingCronus

Je sais que cette réponse est un peu tardive mais ce lien vous donnera une explication détaillée des chemins de fichiers css.

/ returns to the root directory
../ moves one directory backwards
../../ moves two directory backwards

https://css-tricks.com/quick-reminder-about-file-paths/

0
Emc_tgn15

J'avais ce même problème résolu en ajoutant/au début de l'URL de l'image 

(exemple: background-image: url (/images/background.gif);) 

J'espère que cela t'aides :)

0
Seth