CSS Background Image Not Displaying

Question

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?

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 '12 at 09:15
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 '12 at 09: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 '12 at 09:19
@Darksky have you tried to use some dev tools? Also - what is path to your HTML file (that is important to know)? — Viktor S., Dec 25 '12 at 09:24
Can you open the image directly in the browser when navigating to img/debut_dark.png ? — David Hellsing, Dec 25 '12 at 09:24
Try to remove the `repeat 0 0` part and put the images `width` and `height`. — Vucko, Dec 25 '12 at 09:26
Try this it may help http://stackoverflow.com/questions/20233529/pathing-from-in-subdomain/26632150#26632150 — SMHasnain, Oct 29 '14 at 13:56

score 31 · Accepted Answer · edited May 11 '15 at 22:39

31

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

edited May 11 '15 at 22:39

potashin

44,205
11
83
107

answered Dec 25 '12 at 09:19

SaidbakR

13,303
20
101
195

2

I did and I'm still seeing a white background. – darksky Dec 25 '12 at 09:20
@Darksky Where is your CSS file? – SaidbakR Dec 25 '12 at 09:21
36

Got it. The path has to be relative to the CSS file (obviously). Thanks! – darksky Dec 25 '12 at 09:26
@darksky or the absolute path from the document root of your web server. – SaidbakR Mar 08 '17 at 03:19
in my case, I already added the background-color:white to the input field. remove the background color then add your image – Robin Chauhan Aug 19 '22 at 12:28

score 20 · Answer 2 · answered Dec 25 '12 at 09:21

20

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.

answered Dec 25 '12 at 09:21

Surinder ツ

1,778
3
16
27

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 '12 at 09:25
ok. but @Darksky you marked right answer to semsem. i solved your problem :( – Surinder ツ Dec 25 '12 at 09:31

score 11 · Answer 3 · answered May 11 '16 at 17:57

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

answered May 11 '16 at 17:57

daniel.caspers

1,660
1
18
22

3

This helped me :) – Tim Givois Nov 03 '18 at 05:13

score 7 · Answer 4 · answered Dec 25 '12 at 09:21

7

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

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

answered Dec 25 '12 at 09:21

David Hellsing

106,495
44
176
212

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 09 '18 at 05:45

score 5 · Answer 5 · edited Oct 12 '15 at 06:13

5

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

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

edited Oct 12 '15 at 06:13

DexTer

2,043
1
22
45

answered Oct 12 '15 at 05:25

Peter Focus

51
1
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" – Kenneth Murerwa Jul 05 '20 at 18:19

score 4 · Answer 6 · edited May 22 '19 at 03:13

4

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

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

edited May 22 '19 at 03:13

halfelf

9,737
13
54
63

answered May 22 '19 at 02:40

Eduard

63
5

score 3 · Answer 7 · answered May 12 '18 at 15:33

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.

ANIL PATEL · Answer 8 · 2020-11-19T13:21:48.357

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

score 2 · Answer 9 · answered Apr 19 '18 at 12:15

2

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

Worked for me.

answered Apr 19 '18 at 12:15

Daiana

21
1

Akshay Pk · Answer 10 · 2022-08-23T09:19:51.610

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

edited Aug 23 '22 at 09:19

answered Oct 25 '21 at 13:23

Akshay Pk

21
5

what does link stylesheet image stands for? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link – Michal Miky Jankovský Oct 25 '21 at 13:48

score 1 · Answer 11 · edited Jan 20 '14 at 21:17

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

edited Jan 20 '14 at 21:17

Mark Seemann

225,310
48
427
736

answered Jan 20 '14 at 20:57

user3216740

21
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. – MisterGeeky Jun 15 '20 at 01:45

score 1 · Answer 12 · edited Sep 13 '20 at 17:10

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

edited Sep 13 '20 at 17:10

Arghya Sadhu

41,002
9
78
107

answered Sep 13 '20 at 14:07

user14270109

11
1

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

score 1 · Answer 13 · answered Nov 27 '21 at 22:15

1

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

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

answered Nov 27 '21 at 22:15

Steven S.

21
2

score 0 · Answer 14 · answered Jan 19 '18 at 07:53

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

score 0 · Answer 15 · answered Apr 04 '18 at 13:44

0

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

answered Apr 04 '18 at 13:44

Prakash Poudel

434
1
5
17

score 0 · Answer 16 · answered Apr 24 '19 at 10:36

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.

answered Apr 24 '19 at 10:36

Aman Jha

1
1

score 0 · Answer 17 · answered Apr 02 '21 at 06:23

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

answered Apr 02 '21 at 06:23

Amit Kumar

1
2

score 0 · Answer 18 · answered Jul 07 '21 at 05:46

0

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

answered Jul 07 '21 at 05:46

Darshan Dhabale

1
1

score -1 · Answer 19 · edited Feb 06 '18 at 11:59

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

edited Feb 06 '18 at 11:59

Glorfindel

21,988
13
81
109

answered Jan 05 '18 at 15:52

Bobby Dwivedi

1
1

2

Do not vandalize your post. This may result in an [answer ban](//stackoverflow.com/help/answer-bans). 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](//creativecommons.org/licenses/by-sa/3.0/)). By SE policy, any vandalism will be reverted. – Suraj Rao Feb 06 '18 at 12:00

score -1 · Answer 20 · answered Jan 13 '21 at 11:08

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

answered Jan 13 '21 at 11:08

Sheikh Saqlain

11

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?](https://stackoverflow.com/help/how-to-answer) Thanks! – Federico Baù Jan 13 '21 at 12:44

CSS Background Image Not Displaying

20 Answers20

Linked

Related