Why doesn't my Background Image Show?

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

1. You should use slash (/) and not backslash (\).
2. 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;
}