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?

20 Answers

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

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

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

Its always good to have these additional properties besides the

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

1. set dimension to the element

   width:x; height:y;

2. background-size:100%

   • This property helps to fit the image to the above dimension that you define for an element.

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

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

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

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

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

Worked for me.

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

background : url (/img.. ) 

NOTE: If you have your css in a different folder, ensure that you start the image path with THE FORWARD SLASH.

It worked for me. !

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.

In this Question we are going to describe how to use external css use for image calling

like: assets/images/laravelamit.jpg

then you have to go to assets/css/style.css and open and put

background: url(../images/laravelamit.jpg);

If you are developing locally Check if you are processing SCSS to CSS Live sass compiler in VSCode

inside <link> tag in your html file inside href of <link> tag put a dot(.)before the actual path

if the path of style sheet is /css/style.css then the reference will be as follows

<link rel="stylesheet" href="./img/image.jpg"> 

then inside the .css file

put a double dot(..) before the actual path which the image stored it will be like this

body{background-image : url("../img/image.jpg");} 

the above method worked for me

You can try using the !important syntax, it should work fine :

background: url(/img/debut_dark.png) repeat 0 0 !important;

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.

if you are using vs code just try using background:url("img/bimg.jpg") instead of background:url('img/bimg.jpg') Mine worked at it Nothing much I replaced ' with "