CSS Background Image Not Displaying

Question

I have an HTML file with a subdirectory called img with an image called debut_dark.png. In my CSS file, I have:

body { 
    backgro         


        

Answer 1

I am using embedded CSS on a local computer. I put the atom.jpg file in the same folder as my html file, then this code worked:

background-image:url(atom.jpg);

Answer 2

I know this doesn't address the exact case of the OP, but for others coming from Google don't forget to try display: block; based on the element type. I had the image in an <i>, but it wasn't appearing...

Answer 3

Basically the problem is with file path. The forward slash in the beginning of the url makes it look for the file at the root. Removing that, it will be a path relative to this css file - like this: background-image: url(img/debut_dark.png);

If you are using Atom, copying the project path of image sometimes includes forward slash in the copied path so be careful.

Answer 4

Well I figured it out that this attribute display image when the full location is provided in it. I simply uploaded that image on my server and linked the location of that image in the background-image:url("xxxxx.xxx"); attribute and it finally worked but if you guys don't have server then try to enter the complete location of the image in the attribute by going in property of that image. Although i was using this attribute in tag of an HTML file but it will surely works on CSS file too. If that method didn't work then try to upload your image on internet like behance, facebook, instagram,etc and inspect the image and copy that location to your attribute.. Hope This will work

Answer 5

According to your CSS file path, I will suppose it is at the same directory with your HTML page, you have to change the url as follows:

body { background: url(img/debut_dark.png) repeat 0 0; }

Answer 6

You should use like this:

        body { 
            background: url("img/debut_dark.png") repeat 0 0;
        }

        body { 
            background: url("../img/debut_dark.png") repeat 0 0;
        }

        body { 
            background-image: url("../img/debut_dark.png") repeat 0 0;
        }

or try Inspecting CSS Rules using Firefox Firebug tool.