CSS background-image does not work

Question

It does not work When I followed the answer from similar questions

My css file......

.tail{
    height:300px;
    width:300px;
    background-image:url('C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png');
}

in html

<div class="tail">
</div>

path for image: checked linked in html: checked

Answer 1

You need to use the file:// URI Scheme.

.tail{
    height:300px;
    width:300px;
    background-image:url('file://c:/Users/joseph/Documents/GitHub/Spring2014/CMP342/MainProject/WebContent/WEB-INF/img/login.png');
}

If your site is not on your local computer, then you can upload it to a service like imgur.com, and link to the hosted image.

Answer 2

You just have to locate the image path starting fron the path where your have you index file.

Let say your index.html is located in MainProject then you have to use it like this:

.tail{
    height:300px;
    width:300px;
    background-image:url('WebContent\WEB-INF\img\login.png');
}

Answer 3

This is not correct path don't use backslash for path in css property. CSS doesn't allow the backslash (\)

background-image:url('C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png');

Try this

background-image:url('../img/login.png');

OR

background-image:url('C:/Users/joseph/Documents/GitHub/Spring2014/CMP342/MainProject/WebContent/WEB-INF/img/login.png');

Answer 4

Try to use / instead of \

.tail{
    height:300px;
    width:300px;
    background-image:url('file://C:/Users/joseph/Documents/GitHub/Spring2014/CMP342/MainProject/WebContent/WEB-INF/img/login.png');
}

However, I'd suggest you to use relative path instead of absolute path. For example, if your img folder is the same directory as your HTML file then you can use:

.tail{
    height:300px;
    width:300px;
    background-image:url('img/login.png');
}