Styling with backgroung images and background colors

Okay, so I’m currently in the process of styling my “Survey Form” html document as part of the certification project in HTML-CSS.

The problem here is, I can’t seem to figure out how to style the “body element” and “container class” separately with a background image and background color respectively.
Some guidance on the way forward will be much appreciated…

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <title>Survey Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <h1 id="title">Survey Form</h1>
      <p id="description">Thank you for making time to complete this form.</p>
    </header>

    <main>
    <form id="survey-form">
      <div class="form">
        <label for="name" id="name-label">Name</label>
        <input id="name" type="text" name="name" placeholder="Enter your name here" required>
      </div>
      <div class="form">
        <label for="email" id="email-label">Email</label>
        <input id="email" type="email" name="email" placeholder="Enter your email here" required>
      </div>
      <div class="form">
        <label for="age" id="number-label">Age(optional)</label>
        <input id="age" type="number" name="age" placeholder="age" min="16" max="100">
      </div>
      <div class="form">
        <p>Which option best describes your current status?</p>
        <select id="dropdown" name="role" required>
          <option disabled="" selected="" value="">(Select an option)</option>
          <option value="student">Student</option>
          <option value="fulltime">Full-time Job</option>
          <option value="parttime">Part-time Job</option>
          <option value="unemployed">Unemployed</option>
          <option value="other">Other</option>
          <option value="prefernot">Prefer not to say</option>
        </select>
      </div>
      <div class="form">
        <p> Would you recommend our services to your friend?</p>
        <label><input type="radio" value="definitely" name="referrer" checked="">Definitely</label>
        <label><input type="radio" value="maybe" name="referrer">Maybe</label>
        <label><input type="radio" value="not-sure" name="referrer">Not sure</label>
      </div>
      <div class="form">
        <p>What is your favorite holiday destination?</p>
        <select id="fav-feature" name="fav-feature">
          <option value="" disabled="" selected="">(Select an option)</option>
          <option value="challenges">Africa</option>
          <option value="projects">Asia</option>
          <option value="community">America</option>
          <option value="option source">Europe</option>
        </select>
      </div>
      <div class="form">
        <p>What will make your bucket list on every trip? (check all that apply)</p>
        <label><input type="checkbox" name="prefer" value="Front-end Projects"></input>Local Cuisine</label>
        <label><input type="checkbox" name="prefer" value="Back-end Projetcs"></input>Sight Seeing</label>
        <label><input type="checkbox" name="prefer" value="Challenges"></input>Art and Craft</label>
        <label><input type="checkbox" name="prefer" value="Videos"></input>Hiking</label>
        <label><input type="checkbox" name="prefer" value="City Meetups"></input>City Meetups</label>
      </div>
      <div class="form">
        <p>Any comments or suggestions?</p>
        <textarea id="comments" name="comments" cols="30" rows="7" placeholder="Enter your comment here.." max-text="50" ></textarea>
      </div>
      <div class="form">
        <input type="submit" value="Submit" id="submit"></input>
      </div>
    </form>
    </main>
  </div>
</body>


</html>
/* file: styles.css */

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0

Challenge: Build a Survey Form

Link to the challenge: