52

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?

Improve this question
8
  • 3
    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 Commented Dec 25, 2012 at 9:15
  • 3
    Are you sure about image path and name?Check with firebug Commented 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). Commented 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. Commented Dec 25, 2012 at 9:19
  • 1
    Can you open the image directly in the browser when navigating to img/debut_dark.png ? Commented Dec 25, 2012 at 9:24

23 Answers 23

Reset to default
35

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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I did and I'm still seeing a white background.
@Darksky Where is your CSS file?
Got it. The path has to be relative to the CSS file (obviously). Thanks!
@darksky or the absolute path from the document root of your web server.
in my case, I already added the background-color:white to the input field. remove the background color then add your image
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.

Improve this answer

2 Comments

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).
ok. but @Darksky you marked right answer to semsem. i solved your problem :(
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...

Improve this answer

1 Comment

This helped me :)
7

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

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

1 Comment

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

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

background: url(../img/debut_dark.png) repeat
Improve this answer

1 Comment

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

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

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

Comments

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.
Improve this answer

Comments

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;
}
Improve this answer

Comments

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

Worked for me.

Improve this answer

Comments

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

Improve this answer

1 Comment

what does link stylesheet image stands for? developer.mozilla.org/en-US/docs/Web/HTML/Element/link
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);
Improve this answer

1 Comment

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

Improve this answer

1 Comment

Been developing for about 10yrs - took me far too long to get to this haha
1

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

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

Improve this answer

Comments

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

Improve this answer

Comments

0

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

Improve this answer

Comments

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.

Improve this answer

Comments

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

For me the problem arose when I used short hand css code.

Example: shorthand - did NOT work

background-image:url(photos/image.png) no-repeat center;

non shorthand - WORKED

background-image:url(photos/image.png);
background-repeat: no-repeat;
background-position: center;

I hope this helps you. :-)

Improve this answer

Comments

0

Try two things before actually uploading the image:

  1. Put the image in the same folder as the CSS code file.
  2. When writing the URL, just after the double quotes put the forward slash and select the image location from the drop-down that pops up. ( I hope you are using VS code editor)

In the CSS code:

body {
  background-image: url("/ImageFolder/ImageName.extension");
}

Upvote if the answer was useful!!!

Improve this answer

Comments

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

Improve this answer

1 Comment

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

Improve this answer

1 Comment

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!

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.