title: How can I change the opacity of my background (which is an image?)
body: <p>How can I change the opacity of my background that's an image?</p>
  <p>Below is my code... I could be writing it improperly, I've tried messing around with a pseudo-class but it did not work... Below is my original code. **When I change the opacity for HTML in CSS it makes everything transparent... not just the background... So how can I avoid this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
  background-image: url("https://images.unsplash.com/photo-1579954115545-a95591f28bfc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1500&amp;q=80");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  }
  
  #title {
    text-align: center;
    
  }
  
  #description {
    line-height: 1.5;
    text-align: center;
  }
  
  p {
    text-align: center;
  }
  
  #name-label {
    width: 50px;
    display: inline-block;
    line-height: 40px
    
  }
  
  #email-label {
      width: 50px;
      display: inline-block;
    line-height: 40px
      
  }
  
  #number-label {
    width: 50px;
    display: inline-block;
    line-height: 40px;
  }
  
  #Yes {
   text-align:center;
   margin: 0px 3px 0px 0px;
    }
    
  #No {
  text-align:center;
   margin: 0px 3px 0px 12px;    
  }
    
  #Maybe {
  text-align:center;
   margin: 0px 3px 0px 12px; 
  }
      
  #Email {
  text-align:center;
    margin: 0px 3px 0px 0px;
  }
  
  #Mail {
  text-align:center;
    margin: 0px 3px 0px 12px;
  }
  
  #Text {
  text-align:center;
   margin: 0px 3px 0px 12px;
  }
  
  html {
  background-color: #78C7C7;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Smoothie Bar Experience Survey&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;main&gt;
          &lt;h1 id="title"&gt;Smoothie Bar experience Survey&lt;/h1&gt;
          
          &lt;p id="description"&gt;Dear valued Customer, please complete this survey and tell us about your experience at Smoothie Bar. Your feedback will be used to improve our business and environment. Thank you so much!
           &lt;form id="survey-form"&gt;
             &lt;div&gt;
               &lt;center&gt;
           &lt;label id="name-label"&gt;&lt;b&gt; Name&lt;/b&gt;&lt;/label&gt;
               
          &lt;input type="name" id="name" placeholder="Enter your Name..." required&gt;
               &lt;center&gt;
            &lt;/div&gt;
             &lt;div&gt;
               &lt;center&gt;
             &lt;label id="email-label"&gt;&lt;b&gt;Email&lt;/b&gt;&lt;/label&gt;
          &lt;input type="email" id="email" placeholder="Enter your email..." required&gt;
               &lt;/center&gt;
             &lt;/div&gt;
             &lt;div&gt;
               &lt;center&gt;
             &lt;label id="number-label"&gt;&lt;b&gt;Age&lt;/b&gt;&lt;/label&gt;
               
             &lt;input type="number" id="number" min="0" max="150" placeholder="Age..."&gt;
               &lt;/center&gt;
             &lt;/div&gt;
             
             &lt;p&gt;&lt;b&gt;Select your favorite smoothie or the smoothie you got&lt;/b&gt;&lt;/p&gt;
                 
  &lt;center&gt;          
  &lt;form&gt;
  &lt;select name="Smoothie" id="dropdown"&gt;
    &lt;option value="" selected disabled hidden id="dropdown"&gt;Select Smoothie&lt;/option&gt;
    &lt;option value="Chocolate"&gt;Chocolate&lt;/option&gt;
    &lt;option value="Raspberry"&gt;Raspberry&lt;/option&gt;
    &lt;option value="Vanilla"&gt;Vanilla&lt;/option&gt;
    &lt;option value="Blueberry"&gt;Blueberry&lt;/option&gt;
    &lt;/select&gt;
    
    &lt;p&gt;&lt;b&gt;After your experience at Smoothie Bar, would you ever come back?&lt;/b&gt;&lt;/p&gt;
    
    &lt;label for="Yes"&gt; 
    &lt;input id="Yes" type="radio" name="yes-no-maybe" value="Yes"&gt; Yes&lt;/label&gt;
    
    &lt;label for="No"&gt; 
    &lt;input id="No" type="radio" name="yes-no-maybe" value="No"&gt; No&lt;/label&gt;
    
    &lt;label for="Maybe"&gt; 
    &lt;input id="Maybe" type="radio" name="yes-no-maybe" value="Maybe"&gt; Maybe&lt;/label&gt;
    
    &lt;p&gt;&lt;b&gt;Tell us your preferred method of communication for events in the future&lt;/b&gt;&lt;/p&gt;
    
    &lt;label for="Email"&gt;&lt;input id="Email" value="Email" type="checkbox" name="communication" class="checkbox"&gt; Email&lt;/label&gt;
    
    &lt;label for="Mail"&gt;&lt;input id="Mail" value="Mail" type="checkbox" name="communication" class="checkbox"&gt; Mail&lt;/label&gt;
    
    &lt;label for="Text"&gt;&lt;input id="Text" value="Text" type="checkbox" name="communication" class="checkbox"&gt; Text&lt;/label&gt;
    
    &lt;p&gt;&lt;b&gt;Leave a comment&lt;/b&gt;&lt;/p&gt;
    
  &lt;textarea id="Comments" name="Comments" rows="8" cols="50"&gt;&lt;/textarea&gt;
    &lt;div&gt;
  &lt;input type="submit" value="Submit" id="submit"&gt;
  &lt;/center&gt;
    &lt;/div&gt;
                                          
    &lt;form action="mailto:dchirila6@gmail.com"&gt;
    &lt;/form&gt;
    
    &lt;/select&gt;      
        &lt;/main&gt;
             &lt;script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"&lt;/script&gt; 
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>**</p>
  <p>Thank you all!</p>