51

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?

8
  • 2
    Check if image url is correct. Open developer tools and see network tab, your debut_dark.png should be listed there. Check if it was loaded at all
    – Viktor S.
    Dec 25, 2012 at 9:15
  • 3
    Are you sure about image path and name?Check with firebug
    – midstack
    Dec 25, 2012 at 9:17
  • If you want to debug something (HTML/JS/CSS) - you can always open some kind of developer tools available for all modern browsers (F12 is usually enough, but for FF you may need to install Firebug).
    – Viktor S.
    Dec 25, 2012 at 9:18
  • It appears that the image is not loaded. The img subdirectory is in the same directory as the html file. The image is in there. I am using img/debut_dark.png as the path, and it's not working.
    – darksky
    Dec 25, 2012 at 9:19
  • 1
    Can you open the image directly in the browser when navigating to img/debut_dark.png ? Dec 25, 2012 at 9:24

21 Answers 21

33

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; }
5
  • 2
    I did and I'm still seeing a white background.
    – darksky
    Dec 25, 2012 at 9:20
  • @Darksky Where is your CSS file?
    – SaidbakR
    Dec 25, 2012 at 9:21
  • 38
    Got it. The path has to be relative to the CSS file (obviously). Thanks!
    – darksky
    Dec 25, 2012 at 9:26
  • @darksky or the absolute path from the document root of your web server.
    – SaidbakR
    Mar 8, 2017 at 3:19
  • in my case, I already added the background-color:white to the input field. remove the background color then add your image Aug 19, 2022 at 12:28
21

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.

2
  • 2
    I got it.. It had to be url("../img/debut_dark.png"). I just realised the path has to be relative to the CSS file not the HTML file (obviously).
    – darksky
    Dec 25, 2012 at 9:25
  • ok. but @Darksky you marked right answer to semsem. i solved your problem :( Dec 25, 2012 at 9:31
11

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

1
  • 3
    This helped me :)
    – Tim Givois
    Nov 3, 2018 at 5:13
7

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

body { 
    background: url(/img/debut_dark.png) repeat;
    min-height: 100%;
}
1
  • Yes, this is the key. I had a code like this and did not work: .legaltech-procedure .legaltech-proc-details-left span.jp { display: block; background-image: url("/images/flags/1x1/jp.svg"); background-repeat: no-repeat; background-size: 25px 25px; } but then I added min-width: 100%; min-height: 100%; and it displayed the image.
    – Jacques
    Sep 9, 2018 at 5:45
5

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

background: url(../img/debut_dark.png) repeat
1
  • For anyone who the previous answers did not help, this one works. I had the same problem since when creating the site locally, the browser assumes you are referencing from the partition's root directory. Adding two dots to the URL tells the browser that the file is in the root folder as the index.html file. Alternatively, add the entire path. Such as "D:/path_to_image/image.jpg" Jul 5, 2020 at 18:19
4

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

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

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

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;
}
2
body { 
        background: url("../img/debut_dark.png") no-repeat center center fixed;
    }

Worked for me.

2

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="/css/style.css">

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

1
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);
1
  • This is the one that worked for me. It was getting blocked when I tried a full path to the file. When I put a copy in the working folder, it worked. Got the background image. Jun 15, 2020 at 1:45
1
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. !

1
  • Been developing for about 10yrs - took me far too long to get to this haha
    – Sean T
    Sep 29, 2021 at 17:52
1

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

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

0

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

0

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

0

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.

0

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

0

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

0

Try To check the direction of the “/“ “\”….for me they were in the wrong direction

-1

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.

1
  • 2
    Do not vandalize your post. This may result in an answer ban. By posting on the Stack Exchange network, you've granted a non-revocable right for SE to distribute that content (under the CC BY-SA 3.0 license). By SE policy, any vandalism will be reverted.
    – Suraj Rao
    Feb 6, 2018 at 12:00
-1

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 "

1
  • Welcome to StackOverflow. While this explanation may solve the question, including a sample code of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. I suggest you to edit your answer to add some code example, Have a look here → How do I write a good answer? Thanks! Jan 13, 2021 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.