How can I change the opacity of my background (which is an image?)

Question

How can I change the opacity of my background that's an image?

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?

html {
background-image: url("https://images.unsplash.com/photo-1579954115545-a95591f28bfc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&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;
}

<html lang="en">
  <head>
    <title>Smoothie Bar Experience Survey</title>
    </head>
    <body>
      <main>
        <h1 id="title">Smoothie Bar experience Survey</h1>
        
        <p id="description">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!
         <form id="survey-form">
           <div>
             <center>
         <label id="name-label"><b> Name</b></label>
             
        <input type="name" id="name" placeholder="Enter your Name..." required>
             <center>
          </div>
           <div>
             <center>
           <label id="email-label"><b>Email</b></label>
        <input type="email" id="email" placeholder="Enter your email..." required>
             </center>
           </div>
           <div>
             <center>
           <label id="number-label"><b>Age</b></label>
             
           <input type="number" id="number" min="0" max="150" placeholder="Age...">
             </center>
           </div>
           
           <p><b>Select your favorite smoothie or the smoothie you got</b></p>
               
<center>          
<form>
<select name="Smoothie" id="dropdown">
  <option value="" selected disabled hidden id="dropdown">Select Smoothie</option>
  <option value="Chocolate">Chocolate</option>
  <option value="Raspberry">Raspberry</option>
  <option value="Vanilla">Vanilla</option>
  <option value="Blueberry">Blueberry</option>
  </select>
  
  <p><b>After your experience at Smoothie Bar, would you ever come back?</b></p>
  
  <label for="Yes"> 
  <input id="Yes" type="radio" name="yes-no-maybe" value="Yes"> Yes</label>
  
  <label for="No"> 
  <input id="No" type="radio" name="yes-no-maybe" value="No"> No</label>
  
  <label for="Maybe"> 
  <input id="Maybe" type="radio" name="yes-no-maybe" value="Maybe"> Maybe</label>
  
  <p><b>Tell us your preferred method of communication for events in the future</b></p>
  
  <label for="Email"><input id="Email" value="Email" type="checkbox" name="communication" class="checkbox"> Email</label>
  
  <label for="Mail"><input id="Mail" value="Mail" type="checkbox" name="communication" class="checkbox"> Mail</label>
  
  <label for="Text"><input id="Text" value="Text" type="checkbox" name="communication" class="checkbox"> Text</label>
  
  <p><b>Leave a comment</b></p>
  
<textarea id="Comments" name="Comments" rows="8" cols="50"></textarea>
  <div>
<input type="submit" value="Submit" id="submit">
</center>
  </div>
                                        
  <form action="mailto:dchirila6@gmail.com">
  </form>
  
  </select>      
      </main>
           <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"</script> 
    </body>
    </html>

**

Thank you all!

Pytth · Answer 1 · 2021-02-03T00:39:35.647

You would change the opacity of the element containing the background image. Below is an example:

.main-page {
    position: relative;
    height: 100%;
   
}

.example-background-image {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
     opacity: 0.2;
    background: url(https://placeimg.com/640/480/arch);
}

<div class="main-page">
    <div class="example-background-image"></div>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur exercitationem non, recusandae accusantium, tenetur nam laudantium quia dolorem iure aspernatur quasi commodi temporibus impedit sed debitis esse laborum, tempore aut?
    Rem asperiores dolore debitis, laudantium, suscipit consequatur neque minima perspiciatis eaque, atque autem odit esse. Necessitatibus est totam mollitia commodi recusandae molestiae nam repellat repellendus, dignissimos possimus, ullam veniam molestias!
    Repellat voluptatum veniam nobis at suscipit quos, voluptas, hic tempore autem temporibus, quod minima iure ut animi dicta. Veniam nihil voluptatum quae molestiae, fugiat quia vel quidem eos possimus facere?
    Explicabo quo, minus accusamus cum sint odio nemo est. Libero facilis corporis ab odio obcaecati perferendis odit totam maxime adipisci ducimus nisi, aut, ut vel, quod consectetur ea sunt unde.</p>
</div>

How can I change the opacity of my background (which is an image?)

1 Answers1