Warum zeigt mein Hintergrundbild nicht?

Question

Ich habe Probleme, ein Hintergrundbild immer in einem div zu zeigen, und kann nicht für das Leben von mir sehen, warum ...

Dies ist die Struktur, die ich habe:

Folder 
     \style.css 
     \index.html 
     \Images 
      \bookone.jpg 

Ich möchte die Datei bookone.jpg als Hintergrund für ein div. Also wäre der CSS Pfad Folder/style.css und der Image Pfad ist Folder/Images/bookone.jpg. Ich habe den folgenden Code in meiner HTML- und CSS-Datei, aber ich bekomme nichts, wenn ich es vorschaue.

/* CSS */ 
 

 
.book { 
 
    height: 300px; 
 
    width: 300px; 
 
    margin: 0px; 
 
    padding: auto; 
 
    border: 1px solid #000; 
 
} 
 

 
#bookone { 
 
    background: url(..\Images\bookone.jpg) ; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: cover; 
 
}

<!-- HTML --> 
 

 
<div id="bookone" class="book"></div>

Answer 1

1. Sie sollten Slash (/) und nicht umgekehrten Schrägstrich (\) verwenden.
2. Sie sollten sicherstellen, dass das Bild im richtigen Pfad (relativ zur aktuellen css/html-Datei) ist. Wenn die Bilder an der gleichen Stelle in Ihrer CSS-Datei (oder Ihrer HTML-Datei) vorhanden sind, sollten Sie nicht .. verwenden, da Ihr Browser tatsächlich nach dem Bild im oberen Ordner sucht.

Dies ist der letzte CSS-Code Sie wahrscheinlich verwenden sollten:

.book { 
    height: 300px; 
    width: 300px; 
    margin: 0px; 
    padding: auto; 
    border: 1px solid #000; 
} 

#bookone { 
    background: url(Images/bookone.jpg) ; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
} 

Answer 2

gerade meinen Kommentar als Antwort wie diese Hilfe OP zu lösen das Problem zu schreiben

versuchen url(Images/bookone.jpg) in ur CSS-Datei

Answer 3

Es ist wie das Bild angezeigt wird Sie möchten als Ein Hintergrund befindet sich in einem anderen Ordner, in dem sich das CSS befindet. Ich schlage vor, dass Sie das Hintergrundbild aus dem HTML-Code zuweisen. Verwenden Sie den Schrägstrich (/) und nicht den umgekehrten Schrägstrich (\).

z.B

<div id="bookone" class="book" style="background: (url('/myimage/bg.jpg')"></div> 

oder auf css

.book { 
    height: 300px; 
    width: 300px; 
    margin: 0px; 
    padding: auto; 
    border: 1px solid #000; 
} 

#bookone { 
    background: url(./images/bookone.jpg) ; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
}