Why is my background image showing?

Question

I'm having trouble getting a background image to display in a div and life cannot understand for me why ...

This is the structure that I have:

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

I want the bookone.jpg file bookone.jpg be the background of the div. So the CSS path will be Folder / style.css, and the image path will be Folder / Images / bookone.jpg. I have the code below in the html and css file, but when viewing it, nothing happens.

 /* 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 a slash (/), not a backslash (\).
• You need to make sure the image is on the right path (relative to the current css / html file). If the images exist in the same place of your css file (or your html file), you should not use .. , since it actually tells your browser to look for this image in the top folder.

This is the last 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 an answer, since this help helps solve the problem

try url(Images/bookone.jpg) in ur css file

Answer 3

It looks like the image you want to have as the background is in a different folder where the CSS is located. I suggest you assign a background image from HTML code. Use a slash (/) rather than a backslash (\).

Eg

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

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