CSS Background image not loading

html css image background

306,890

Solution 1

here is another image url result..working fine...i'm just put only a image path..please check it..

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;


}

Solution 2

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.

Solution 3

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.

Solution 4

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.

Solution 5

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

View more solutions

306,890

Author by

jaredad7

Graduated from Louisiana Tech University May 2017 with a B.S. in Computer Science and a B.S. in Cyber Engineering. Focused primarily on Cyber Security and secure development, I work at a consulting firm as a security consultant for fortune 500 companies.

Updated on October 30, 2021

Comments

jaredad7 over 2 years
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;        
}
```
jaredad7 over 10 years

I originally had it outside of quotes, and it did not work. Just tried that again; did not work.
jaredad7 over 10 years

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?
Quentin over 10 years

Using single quotes will only cause problems on IE/Mac, which won't even run on a modern Mac.
jaredad7 over 10 years

Quotes do not cause a problem for me.
Krish over 10 years

may browser cache (press ctrl+f5) or image extension problem...plz check both case .it wil be fine
Frankenscarf over 10 years

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.
Lea Cohen about 9 years

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.
Andrew almost 9 years

the dots worked for css background-image: url(). with file system` Index.html\css\stylesheet.css` and index.html\images\image.png
MForMarlon about 6 years

Did you try this yourself? Sorry, but I don't think your solution is accurate.
Admin about 6 years

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.
Admin about 6 years

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
jaredad7 over 2 years

You don't need to do this. A relative path is fine.
Adan Vivero almost 2 years

This is the only answer that actually worked for me.