Why doesn't my Background Image Show? - html

Question

I am having trouble getting a background image to show in a div and can't for the life of me see why...
This is the structure that I have:
Folder
\style.css
\index.html
\Images
\bookone.jpg
I want the bookone.jpg file to be the background of a div.
So the CSS path would be Folder/style.css and the image path is Folder/Images/bookone.jpg. I have the below code in my html and css file but I get nothing when previewing it.
/* 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

You should use slash (/) and not backslash (\).
You should make sure the image is in the correct path (relatively to the current css/html file).
If the images exists in the same location of your css file (or your html file) you shouldn't use the .., since it actually tells your browser to search for that image in the upper-folder.
This is the final css code you should probably use:
.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

just writing my comment as answer as this help OP to solved the problem
try url(Images/bookone.jpg) in ur css file

Answer 3

It appears like the image you want have as a background is in another folder away from where the CSS is. I suggest you assign the background image from the HTML code. Use the forward slash (/) and not backslash (\).
E.G
<div id="bookone" class="book" style="background: (url('/myimage/bg.jpg')"></div>
or on 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;
}