HTML and CSS Background-image is not showing up

Question

I already double checked my URL, and the name of the files, but I can\'t seem to get the image to show up. Why is it like that? Here\'s my code (take note the

Answer 1

I know this answer is a bit late but this link will give you a detailed explanation for css file paths.

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

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

Answer 2

The browser will be searching for the image within your stylesheet directory at the moment.

Might be worth trying changing

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

to

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

which might be the cause of the problem.

Answer 3

Try this:

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

Without the ../ it is looking for an images folder inside your stylesheet folder which does not exist. So you have to go back a directory where the images folder is located.

Edit: You can also shorten up your CSS styles like so:

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

Answer 4

I was having this same problem solved it by adding / to the beginning of the image url

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

Hope this helps :)

Answer 5

May be you've used backward slashes (\) instead of forward slashes (/) in the image path.

I did this mistake and was fighting with my chrome browser. I copied the image path from Windows Explorer (which uses backward slashes)