css background image wont work

问题

For the life of me I can't figure out why my background image wont show up. The file path is correct. Here is the HTML :

 <section class="banner_area">
      <p>Hi, I'm a <span>Front-End Web Developer</span> 
          who makes clean and responsive designs come to life.
      </p>
</section>

and the CSS :

.banner_area {
    background-image:url("images/banneralt4.jpg");
    height:600px;
    background-attachment:fixed;
    background-size:cover;
    background-position:center;
    position:relative;
}

it worked fine on my other one. same code basically. If i were to set a background color it would show up fine.

回答1:

The image location is relative to the CSS file. From your explanation your folder structure is the following:

• root folder
  • css
  • images
  • script

As the css folder is at the same level as the images folder you need to go up one level to access an image in the images folder. Therefore the location of the image in your css should be:

background-image:url:("../images/banneralt4.jpg");

The reason why images/banneralt4.jpg worked when adding the image directly to your HTML is because the images folder is a child of the root folder.

回答2:

It looks like you are within a CSS folder. In you file path exit the folder and direct to the images (i doubt the images folder are within your CSS folder)

background-image:url("../images/banneralt4.jpg");

来源：https://stackoverflow.com/questions/17927825/css-background-image-wont-work