Why can't I set a background image?

问题

I know it's repetitious question but I have problem with my code. I have searched stackoverflow and w3schools for a background image setting and wrote the code that was on both sites exactly but still I have problem with the following code.

body {
  background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}

body{  background-image: url("Male-Fitness-Models-BAck.jpg");  }

above are the codes I used for setting background, but neither of them work.

HTML picture

回答1:

If the background image file location is correct you might need to add a height and width to the container of the background image.

body {
  height: 500px;
  width: 500px;
  background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}

回答2:

body 
{
background : cover;
background: url("http://quizdoo.com/wp-content/uploads/qc-images/58d2957b47354.jpg"); 
}

<body>
</body>

Add background size to make it visible

body 
{
background: cover;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg"); 
}

回答3:

There are a few things to investigate to ensure it always works:

1) Using the project absolute path:

ensure you have FollowSymLinks in your vhosts enabled, that way you can use / in the src to call the image.

e.g. <img src="/images/dog.png" />

2) Make sure the image exists

copy and paste the src that's displayed in the browser (inspect with firebug, or view-page source to get the link) into the url bar and see what it returns - if it's a 404 then it doesn't exist on the path you gave, if it's 403 the path might be set to really strict permissions (755 on directories and 644 for files is recommended) and you might have to tweak your vhosts file to allow people to view the content, but not access the file tree.

3) If the image does exist, there is no message (other than 200) and you're using the path correctly - then it's probably because the div is empty. A background on a div with no content will result in empty space, because the background is stretching itself over 0 pixels. Add a min-height and min-width rule to your css or use   inside the div:

CSS:

div {
    background: url('/images/dog.png');
    min-height: 50px;
    min-width:  50px;
}

HTML:

<div>&nbsp;</div>

4) Use a proper folder structure

by using a file tree that makes sense, it makes resources easier to manage. Hosting every file in the DOCUMENT_ROOT is messy, I'd recommend the below structure:

|--index.html
|----images/
|----css/
|----js/

that's a basic structure, then you can add more folders based on area e.g.

|--index.html
|----[area]/
|----images/
|----css/
|----js/

来源：https://stackoverflow.com/questions/43996209/why-cant-i-set-a-background-image

标签

html

css

background-image