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?

SaidbakR

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

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.

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

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

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

Peter Focus

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

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

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

Worked for me.

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.

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

user3216740

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

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

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

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.

Eduard

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

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

Bobby Dwivedi

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