CSS Background image not loading

Question

I have followed all of the tutorials  which all say the say thing  I specify my background inside of body in my css style sheet  but the page just displays a blank white background   Image is in the same directory as the  html and the  css pages  The tutorial says that   lt body background  image jpeg  gt    is deprecated  so I use  in css   body  background  url  image jpeg       no success  Here is the entire css style sheet   body    background-image  url  nickcage jpg    padding-left  11em  padding-right  20em  font-family  Georgia   Times New Roman   Times  serif   color  red

User · Answer

I had the same issue  The problem ended up being the path to the image file  Make sure the image path is relative to the location of the CSS file instead of the HTML

User · Answer

I had changed the document root for my wamp-server-installed apache web server  so using the relative url i e   images img png  didn t work  I had to use the absolute url in order for it to work i e    background-image url  http   localhost project x images img png

User · Answer

I ran into the same problem  If you have your images within folders then try this  background-image  url  resources img hero jpg     Don t forget to put the backslash in front of the first folder

User · Answer

The path to the image should be relative  that means if css file is in css folder than you should start path with     such as    x000D   x000D  body  x000D     background-image  url    images logo jpg   x000D    x000D   x000D   x000D    this is because you have to get back to home dir by     path and then  images logo jpg path to the image file  If you are including css file in html itself   x000D   x000D  body  x000D     background-image  url images logo jpg   x000D    x000D   x000D   x000D   this code will work just fine

User · Answer

I found the problem was you can t use short URL for image  img image jpg   you should use the full URL  http   www website com img image jpg   yet I don t know why

User · Answer

here is another image url result  working fine   i m just put only a image path  please check it    Fiddel http   jsfiddle net 287Kw   body    background-image  url  http   www birds com wp-content uploads home bird4 jpg    padding-left  11em  padding-right  20em  font-family  Georgia   Times New Roman   Times  serif   color  red

User · Answer

the following code worked for me where i had placed the image in somefolder assets img background some img jpg  background-image  url     img background some img jpg    background-size  cover  background-repeat  no-repeat

User · Answer

for me following line is working for me   I put it in the css of my body   where image is in same folder in which my css and  html files      background  url  test jpg      Other thing that you must care about is   be careful about image extension   be sure that your image has  jpeg or  jpg extension  Thanks

User · Answer

I had the same problem and after reading this found the issue  it was the slash  Windows Path  images green cup png  CSS that worked  images green cup png  images green cup png does not work   Phil

User · Answer

i can bring a little help here    it seems that when you use say  background-image  url   images image jpg    or background-image  url  images image jpg    or background-image  url     images image jpg    different browsers appear to see this differently  the first the browser seems to see this as domain com images image jpg     the second the browser sees at domain com css images image jpg     and the final the browser sees as domain com PathToImageFile image jpg    hopes this helps

User · Answer

try this   background-image  url   yourimagefolder yourimage jpg       I had the same problem when I used  background-image  url  yourimagefolder yourimage jpg      Notice the slash that made the difference  The level of the folder was the reason why I could not load the image  I guess you also encountered the same issue

User · Answer

If you place image and css folder inside a parent directory suppose assets then the following code works perfectly  Either double quote or without a double quote both work fine     x000D   x000D  body  x000D     background  url     image bg jpg    x000D    x000D   x000D   x000D    In other cases like if you call a class and try to put a background image in a particular location then you must mention height and width as well

User · Answer

I d like to share my debugging process because I was stuck on this issue for at least an hour  Image could not be found when running local host  To add some context  I am styling within a rails app in the following directory   apps assets stylesheets main scss   I wanted to render background image in header tag  The following was my original implementation    header       text-align  center      background  linear-gradient 90deg   d4eece   d4eece   d4eece                 url     images header jpg   no-repeat                background-blend-mode  multiply                background-size  cover         as a result I was getting the following error in rails server and the console in Chrome dev tools  respectively   ActionController  RoutingError  No route matches  GET    images header jpg   GET http   localhost 3000 images header jpg 404  Not Found    I tried different variations of the url    url     images header jpg     DID NOT WORK url      images header jpg     DID NOT WORK url       images header jpg     DID NOT WORK   and it still did not work  At that point  I was very confused   I decided to move the image folder from the assets directory  which is the default  to within the stylesheets directory  and tried the following variations of the url   url   images header jpg     DID NOT WORK url    images header jpg     WORKED url  images header jpg     WORKED   I no longer got the console and rails server error  But the image still was not showing for some reason  After temporarily giving up  I found out the solution to this was to add a height property in order for the image to be shown      header       text-align  center      height  390px      background  linear-gradient 90deg   d4eece   d4eece   d4eece                 url  images header jpg   no-repeat                background-blend-mode  multiply                background-size  cover      Unfortunately  I am still not sure why the 3 initial url attempts with     images header jpg  did not work on localhost  or when I should or shouldn t be adding a period at the beginning of the url    It might have something to do with how the default link tag is setup in application html erb  or maybe it s a  scss vs  css thing  Or  maybe that s just how the background property with url   works  the image needs to be within same directory as the css file   Anyhow  this is how I solved the issue with CSS background image not loading on localhost

User · Answer

First of all  wave bye-bye to those quotes   background-image  url nickcage jpg      No quotes around the file name   Next  if your html  css and image are all in the same directory then removing the quotes should fix it  If  however  your css or image are in subdirectories of where your html lives  you ll want to make sure you correctly path to the image   background-image  url    images nickcage jpg      css and image live in subdorectories  background-image  url images nickcage jpg      css lives with html but images is a subdirectory   Hope it helps

[html] CSS Background image not loading

Examples related to html

Examples related to css

Examples related to image

Examples related to background