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

User · Answer

I have the same issue  But it works properly for me  background  url    img debut dark png  repeat

User · Answer

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

User · Answer

if you are using vs code just try using background url  quot img bimg jpg quot   instead of  background url  img bimg jpg   Mine worked at it Nothing much I replaced   with  quot

User · Answer

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

User · Answer

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  amp  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  quot     quot  syntax  Then move to the  img  folder using  quot    img quot  syntax  Then write the image name  quot    img debut dark png quot   body        background  url  quot    img debut dark png quot   repeat 0 0

User · Answer

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

User · Answer

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  lt i gt   but it wasn t appearing

User · Answer

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

User · Answer

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

User · Answer

Make sure your body has a height  f ex   body        background  url  img debut dark png  repeat      min-height  100

User · Answer

I had the same issue  For me it worked with     background  url     img green jpg   no-repeat center bottom cover    height  100vh

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

body            background  url     img debut dark png   no-repeat center center fixed          Worked for me

User · Answer

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

[html] CSS Background Image Not Displaying

Examples related to html

Examples related to css

Examples related to path

Examples related to background-image