为什么不使用CSS显示我的背景图像？

Question

So I am trying to call a background image through a seperate CSS file. The HTML file and CSS file are on the same level, but the background image is two levels lower.

Example:

index.html

stylesheet.css

resources>assets> background-image

Here is my html:

    <div class="second-background">
       <h2>Our</h2>
       <div class="purpose-heading"><h2>Purpose</h2></div>
       <p class="textstyle6">To provide unaccompanied runaway and homeless youth with a safe and nurturing environment where they can develop the needed skills to become active, healthy, successful members of our future world.</p>
       <div id="rectangle"><p class="textstyle2">7,085 MEALS SERVED. 511 DROP-IN SERVICES.<br/>245 STREET OUTREACH HOURS. 64 SHELTERED YOUTH.</p></div>
    </div>

Here is my CSS:

.second-background {
background-image:url("../resources/assets/purpose.png");
}
#rectangle {
width: 1110px;
height: 105px;
background-color: #ffffff;
}

Answer 1

The path is wrong, remove the ../ from the image path in css. If the structure is as you say it is.

Learn more about file paths here: https://www.w3schools.com/html/html_filepaths.asp and here: https://css-tricks.com/quick-reminder-about-file-paths/

Answer 2

The path rules break down like this: ../ means “go up one level” (that is, up to the folder containing the styles folder);
images/ means “go to the images folder”; and bg.gif specifies that file.

According to the folder structure you provided : The correct way is this :

           .second-background {
              background-image:url("resources/assets/purpose.png");
            }
           #rectangle {
             width: 1110px;
             height: 105px;
              background-color: #ffffff;
          }

Hope it helps