CSS Background Image Not Displaying

问题

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

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

The HTML file has the body tag and does include the CSS file appropriately. I know for sure the CSS file is included properly as everything else is formatted properly.

The background image is not getting displayed, I am only seeing a white background. Any ideas how to fix this, or even how to debug it?

回答1:

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

回答2:

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.

回答3:

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...

回答4:

Make sure your body has a height, f.ex:

body { 
    background: url(/img/debut_dark.png) repeat;
    min-height: 100%;
}

回答5:

I have the same issue. But it works properly for me

background: url(../img/debut_dark.png) repeat

回答6:

body { 
        background: url("../img/debut_dark.png") no-repeat center center fixed;
    }

Worked for me.

回答7:

Its always good to have these additional properties besides the

background-image:url('path') no-repeat 0 0;

set dimension to the element

width:x; height:y;
background-size:100%
- This property helps to fit the image to the above dimension that you define for an element.

回答8:

You have to use a relative path in the URL. I think you made two folders in the root directory where your index.html resides. One is 'CSS' folder & another is 'img' folder.

Now, if you have to access 'img' folder in css files. So you have to go back once in root directory using "../" syntax. Then move to the 'img' folder using "../img" syntax. Then write the image name "../img/debut_dark.png".

回答9:

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);

回答10:

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

回答11:

I was having the same issue, after i remove the repeat 0 0 part, it solved my problem.

回答12:

If your path is correct then I think you don't have any element in you body section. Just define the height of the body and your code will work.

回答13:

I had the same issue. For me it worked with:

  background: url("../img/green.jpg") no-repeat center bottom/cover;
  height: 100vh;

回答14:

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.

来源：https://stackoverflow.com/questions/14029277/css-background-image-not-displaying

标签

html

css

path

background-image