HTML e CSS L'immagine di sfondo non viene visualizzata

Ho già controllato l'URL e il nome dei file, ma non riesco a visualizzare l'immagine. Perché è così? Ecco il mio codice (prendi nota che lo <p> si trova all'interno dei tag del corpo, non ho aggiunto il codice completo, ho solo aggiunto la testa e il problema specifico).HTML e CSS L'immagine di sfondo non viene visualizzata

<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>

Ed ecco la regola CSS per quella parte

.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; 
}

fonte

2012-01-12 user962206

Qual è l'URL dell'immagine? /images/background.gif o /stylesheet/images/background.gif – KingCronus

si trova image/background.gif. questa è la pagina HTML principale. – user962206

cambia 'background-image: url (../ images/background.gif)' –

Prova questo:

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

Senza il ../ si è alla ricerca di una cartella images all'interno della cartella foglio di stile che non esiste . Quindi devi tornare a una directory in cui si trova la cartella delle immagini.

Modifica: Si può anche ridurre i vostri stili CSS in questo modo:

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

fonte

2012-01-12 16:52:34 Drew

In altre parole: il contenuto esterno nei fogli di stile è collegato relativamente al percorso del foglio di stile. Se il foglio di stile è in 'stylesheet/style.css', quindi' images/bg.gif' si risolverà in 'stylesheey/images/bg.gif'. –

Geez, finalmente ho funzionato. Non mi sono mai reso conto di essere in un percorso diverso e la cartella delle immagini non è la stessa con la pagina principale, grazie anche per l'aggiunta di alcuni suggerimenti utili! Sono nuovo ai CSS, in particolare alla programmazione web. Grazie Drew! – user962206

Post molto utile! – nckbrz

Il browser sarà alla ricerca per l'immagine all'interno della vostra directory di foglio di stile in questo momento.

Potrebbe essere utile cercare cambiando

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

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

che potrebbe essere la causa del problema.

fonte

2012-01-12 16:53:11 KingCronus

-1

È possibile che si siano utilizzate barre rovesciate (\) anziché barre (/) nel percorso dell'immagine.

Ho fatto questo errore e stavo combattendo con il mio browser Chrome. Ho copiato il percorso dell'immagine da Esplora risorse di Windows (che usa barre rovesciate)

fonte

2014-10-02 17:21:31

ho avuto questo stesso problema risolto con l'aggiunta/per l'inizio dell'immagine URL

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

Spero che questo aiuti :)

fonte

2015-08-11 14:07:52 Seth

so che questa risposta è un po 'tardi, ma questo link vi darà una spiegazione dettagliata per i percorsi dei file css.

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

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

fonte

2016-02-13 18:30:43

HTML e CSS L'immagine di sfondo non viene visualizzata

risposta

Problemi correlati