CSS Background image not loading

2019-01-18 23:00发布

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

14条回答
放我归山
2楼-- · 2019-01-18 23:16

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;


}
查看更多
叼着烟拽天下
3楼-- · 2019-01-18 23:16

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.

查看更多
成全新的幸福
4楼-- · 2019-01-18 23:19

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

查看更多
做个烂人
5楼-- · 2019-01-18 23:22

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

查看更多
老娘就宠你
6楼-- · 2019-01-18 23:23

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;
查看更多
我想做一个坏孩纸
7楼-- · 2019-01-18 23:27

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.

查看更多
登录 后发表回答