46

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

<body background="image.jpeg">

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;        
}
Anup
  • 9,396
  • 16
  • 74
  • 138
jaredad7
  • 998
  • 2
  • 11
  • 33
  • where put you image? which folder? "images" folder? if you have try in jsfiddle? – Falguni Panchal Jan 27 '14 at 06:45
  • 1
    please check your image extention.... – Krish Jan 27 '14 at 06:46
  • 1
    Try [CTRL] + [F5] to hard refresh the page within the browser. Maybe it's just a caching problem. And like Nikhil said: search for typos in general ;) – Adrian Jan 27 '14 at 06:55
  • 1
    Do 1 thing..make an `Inspect element` in chrome, select the `body tag` & then click on the `img` in the `body` style....Its opens or not? – Anup Jan 27 '14 at 07:10
  • Image extension is correct, was one of the first things I checked – jaredad7 Jan 27 '14 at 07:10
  • What is the size of ur `img`? – Anup Jan 27 '14 at 07:11
  • Well, suddenly it just worked after I switched to using Nikhil krishnan's bird url. His worked, then I switched back to mine and mine worked. No idea what happened, but the problem is now resolved. – jaredad7 Jan 27 '14 at 07:14
  • 1
    Then it was browser's cache problem...! – Anup Jan 27 '14 at 07:14
  • I'm not sure about that. I've been working on this off and on for an entire day. Do you think it was a browser cache problem every single time? – jaredad7 Jan 27 '14 at 07:16
  • Till you have the correct code...When ur code was correct, ur browser was actually showing the older code..! – Anup Jan 27 '14 at 07:18

19 Answers19

61

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.

Frankenscarf
  • 1,189
  • 7
  • 10
  • 4
    I originally had it outside of quotes, and it did not work. Just tried that again; did not work. – jaredad7 Jan 27 '14 at 07:07
  • Using single quotes will only cause problems on IE/Mac, which won't even run on a modern Mac. – Quentin Jan 27 '14 at 07:15
  • 3
    Quotes do not cause a problem for me. – jaredad7 Jan 27 '14 at 07:17
  • 3
    quotes are optional for the most part; when dealing with special chars and spaces, quotes become necessary. Quotes weren't the issue, just an unnecessary nuisance/useless bytes/potential typo fodder. – Frankenscarf Jan 27 '14 at 08:04
  • the dots worked for css background-image: url(). with file system` Index.html\css\stylesheet.css` and `index.html\images\image.png` – Andrew Jun 04 '15 at 12:54
30

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.

Timothy Carr
  • 301
  • 3
  • 2
9

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;


}
Krish
  • 1,884
  • 2
  • 16
  • 40
  • 2
    Ok, yours worked, but I had tried image paths to online urls before which had not worked. Can you think of a reason why this one specifically has worked, but not others? – jaredad7 Jan 27 '14 at 07:08
  • 3
    may browser cache (press ctrl+f5) or image extension problem...plz check both case .it wil be fine – Krish Jan 27 '14 at 07:21
8

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.

Andrew Wiley
  • 81
  • 1
  • 3
7

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

user3670684
  • 1,135
  • 9
  • 8
  • If you could please edit your answer and explain what the code you're showing does, and why/how that code answers the question, it could really help. – Lea Cohen Feb 25 '15 at 09:27
4

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.

George.
  • 860
  • 12
  • 15
3

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 

body{
   background-image: url(../images/logo.jpg);
}

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

body{
   background-image: url(images/logo.jpg);
}
this code will work just fine.
akaMahesh
  • 383
  • 2
  • 9
2

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

Usman
  • 333
  • 3
  • 14
2

This is because background: url('image.jpeg'); does not work inside a blank <div> use padding in the class belonging to image <div>

body 
{
background-image: url('../../nickcage.jpg');
padding: 30%;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;        
}
Alvin masievi
  • 3
  • 2
zircon
  • 742
  • 1
  • 10
  • 22
1

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

Omar Albeik
  • 1,332
  • 13
  • 17
1

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. 

body{
   background: url("../image/bg.jpg");
}

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.

user1957229
  • 61
  • 4
1

In chrome developer tool, you can find if the image is loaded or not. to see that inspect and use css style tab. if the image is loaded there, then some time you have not added the css

height: 500px;

property for the image.

yourselector {
background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire 
                          container */
}
HeshanHH
  • 653
  • 7
  • 9
1

Assuming your file path is correct, this is what has helped me. Add this style to image container:

background-size: cover;

or

background-size: contain;
Human programmer
  • 408
  • 4
  • 11
0

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

fritz
  • 199
  • 3
  • 13
0

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

PCSailor
  • 69
  • 6
0

In my case, it ended up being the div having 0px height and width. I resized divs and saw my images.

Dharman
  • 30,962
  • 25
  • 85
  • 135
BladeOfLightX
  • 504
  • 4
  • 17
-1

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;
user7702588
  • 1
-1

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

tay
  • 36
  • 2
  • Did you try this yourself? Sorry, but I don't think your solution is accurate. – MForMarlon May 15 '18 at 22:39
  • try it yourself with google developer tools, inspect... you can hover over the ("../images/image.jpg") link and it will give you the url name... trial and error showed me what was happening. – tay May 16 '18 at 00:21
  • sorry you are correct the first and second are switched... "images/images.jpg" is seen as /css/images/image.jpg and "/images/images.jpg"is just /images/image.jpg... sry about that – tay May 16 '18 at 00:26
-1

In my case I used double quotes "" instead of single quotes ''

  const styling = {                
//      backgroundImage: `url('${backgroundSrc}')`,  <------ HERE
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        backgroundSize: "cover"        
    }

some links have quotes in them which aren't escaped, so they mess up.

Use double quotes "" instead. Like this backgroundImage: `url("${backgroundSrc}")`,

Syed Umair
  • 1,480
  • 1
  • 13
  • 14