Why isnt't my background image displaying-CodePudding

The following is an external CSS I made but for some reason the header background image doesn't pop up. I've tried everything I could think off but it still doesn't work.

body { background-color: #FFFFFF;
        font-family: sans-serif; }
    p { color: #666666;}
    header { background-color: #002171; color:#FFFFFF;
             background-image: url("C:\$Learning\WEB101Class\Assignments\Case Study\ch5pacific\sunset.jpg"); 
             background-position: right; 
             background-repeat: no-repeat; line-height: 400%; text-indent: 1em; }
    nav { background-color:#BBDEFB;
          font-weight: bold;}
    nav a { text-decoration: none;}
    h1 {font-family: Times New Roman;
        margin-bottom: 0;}
    h2 { color:#1976D2;
         font-family: Times New Roman;}
    h3 { color:#000033;
         font-family: Georgia;}
    dt { color:#002171;}
    .resort { color:#1976D2; font-weight: bold;}
    #contact {font-size: 90%}
    ul { list-style-image: (marker.gif);}
    footer { font-size: 75%; font-style: italic; 
             text-align: center; font-family: Times New Roman;}

Here's the main code

<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<meta charset="utf-8">
    <style>
        
        
    </style>
    <link href="pacific.css" rel="stylesheet">
</head>
<body>

The image is supposed to appear below but it comes out normal.

  
        <h1>Pacific Trails Resort</h1>
    <nav>
        <a href="index.html">Home</a> &nbsp;
        <a href="yurts.html">Yurts</a> &nbsp;
       <a href="activities.html">Activities</a> &nbsp;
     <a href="reservations.html">Reservations</a> &nbsp;
    </nav>
        <div>
        <img src="coast.jpg" width="100%" alt="100%" height="100%">
    </div>
<main>
 <h2>Enjoy Nature in Luxury</h2>
 <p><span >Pacific Trails Resort</span> offers a special lodging experience on
the California North Coast with panoramic views of the
Pacific Ocean. Your stay at Pacific Trails Resort includes a
sumptuously appointed private yurt and a cooked-to-order
breakfast each morning</p>
  <ul>
      <li>Unwind in the heated outdoor pool and whirlpool </li>
      <li>Explore the coast on your own or join our guided tours</li>
      <li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
      <li>Savor nightly fine dining with an ocean view</li>
  </ul>
    <div id="contact">
        <p><span >Pacific Trials Resort</span><br>
        12010 Pacific Trails Road<br>
        Zephyr, CA 95555<br><br>
        888-555-5555</p>
    </div>
    <br>
<footer>
    Copyright &copy; 2020 Pacific Trails Resort <br>
    <a href="mailto:[email protected]">contact@Chukwuemeka Ihenacho</a>
  
</footer>
    </main>
</body>
</html>

What did I do wrong? I can't seem to make the image appear.

CodePudding user response：

you should change url from root folder for example if your project structure is this:

my-project
|_ css
  |__ style.css
_ images
  | __ bg.png

you should type url like this:

.somethimg {
    background-image: url(../images/bg.png);
}

../ means Bring back a folder

if the image you're using is not exist in the project folder, you should copy and paste in this. because when you upload your site in the host, Your C drive is no longer available for image url

CodePudding user response：

First of all: Put your images in your project root folder. Create in your project root several folders and name them so that they are easy for you and others to understand. Like: [css, js , images] or [assets/css, assets/js, assets/images]. Starting from root, you can then use relative paths to include images. Like /assets/images/my-cat.jpeg.

In your case mentioned above, several errors may have occurred. One is that folder names with spaces should not be used.