How can I add a semi-transparent rectangular background behind the survey form?

Question

How do I add a background for the survey form, like how they do it here?

I am talking about the smaller, dark box behind the questions, not the purple background.

body {
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-align: center;
}

#description {
  font-style: italic;
}

.one-line {
  display: block;
  padding: 10px 0px 5px 0px;
}

.form-control {
  width: 500px;
}

#dropdown {
  width: 510px;
}

label {
  font-size: 20px;
}

#submit {
  margin: 10px;
}

#form-background {
  width: 200px;
  height: 200px;
  color: red;
}

<body id="body">
  <h1 id="title" class="text-center">Jollibee Order Form</h1>
  <p id="description" class="text-center">Welcome to Jollibee's order form! Hot, fresh, & juicy food all day long!</p>

  <form id="survey-form">
    <div>
      <label id="name-label" class="one-line">Name</label>
      <input type="text" id="name" placeholder="Enter your name" required class="form-control" />
    </div>

    <div>
      <label id="email-label" class="one-line">Email</label>
      <input type="email" id="email" placeholder="Enter your email" required class="form-control" />
    </div>

    <div>
      <label id="number-label" class="one-line">Age</label>
      <input type="number" id="number" min="10" max="100" placeholder="Enter your age" required class="form-control" />
    </div>

    <div>
      <label class="one-line">Main</label>
      <select name="options" id="dropdown" class="form-control">
        <option value="option 1">Jolly Crispy Fried Chicken (spicy)
        </option>
        <option value="option 2">Jolly Crispy Fried Chicken (regular)
        </option>
        <option value="option 3">Original Chicken Sandwich </option>
        <option value="option 4">Spicy Fried Chicken Sandwich
        </option>
        <option value="Jolly Spaghetti">Jolly Spaghetti</option>
      </select>
    </div>

    <div>
      <label class="one-line">Drink</label>
      <input type="radio" name="radio buttons" value="radio
      1" />Pineapple Quencher
      <input type="radio" name="radio buttons" value="radio
      2" />Water
    </div>

    <div>
      <label class="one-line">Pie</label>
      <input type="checkbox" value="checkbox 1" />Banana Langka Pie
      <input type="checkbox" value="checkbox 2" />Peach Mango Pie
    </div>

    <div>
      <label class="one-line">Special order notes?</label>
      <textarea class="form-control"></textarea>
    </div>

    <input type="submit" id="submit" class="form-control" />
  </form>
</body>

<div id="form-background"></div>

This question is being discussed on [meta](https://meta.stackoverflow.com/questions/413632/did-i-do-something-i-shouldnt-have-done-downvotes-on-my-post). — justANewb stands with Ukraine, Dec 10 '21 at 03:27

score 2 · Accepted Answer · answered Dec 02 '21 at 21:00

You can simply use a .container and give it a background color. Please see the changes I made to your code. For the other image, you can set a background-image to your body.

body {
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-align: center;
  width: 100vw;
  height: 100vh;
  background-image: url('https://cdn.wallpapersafari.com/53/62/l6bruO.jpg');
  background-repeat: repeat-y;
  background-size: cover;
}

#description {
  font-style: italic;
}

.one-line {
  display: block;
  padding: 10px 0px 5px 0px;
}

.form-control {
  width: 500px;  
}

#dropdown {
  width: 510px;
}

label {
  font-size: 20px;
}

#submit {
  margin: 10px;
}

.container {
  width: 1000px;
  height: 600px;
  background-color: red;
}

<body id="body">
 <div class="container">
  <h1 id="title" class="text-center">Jollibee Order Form</h1>
  <p id="description" class="text-center">Welcome to Jollibee's 
  order form! Hot, fresh, & juicy food all day long!</p>

  <form id="survey-form">
    <div>
      <label id="name-label" class="one-line">Name</label>
      <input type="text" id="name" placeholder="Enter your name" required class="form-control"/>
    </div>
    
    <div>
      <label id="email-label" class="one-line">Email</label>
      <input type="email" id="email" placeholder="Enter your email" required class="form-control"/>
    </div>
  
    <div>
      <label id="number-label" class="one-line">Age</label>
      <input type="number" id="number" min="10" max="100" placeholder="Enter your age" required class="form-control"/>
    </div>
    
    <div>
      <label class="one-line">Main</label>
      <select name="options" id="dropdown" class="form-control">
        <option value="option 1">Jolly Crispy Fried Chicken               (spicy)
        </option>
        <option value="option 2">Jolly Crispy Fried Chicken
        (regular)
        </option>
        <option value="option 3">Original Chicken Sandwich                 </option>
        <option value="option 4">Spicy Fried Chicken 
        Sandwich</option>
        <option value="Jolly Spaghetti">Jolly Spaghetti</option>
      </select>
    </div>
    
    <div>
      <label class="one-line">Drink</label>
      <input type="radio" name="radio buttons" value="radio   
      1"/>Pineapple Quencher
      <input type="radio" name="radio buttons" value="radio   
      2"/>Water
    </div>
    
    <div>
      <label class="one-line">Pie</label>
      <input type="checkbox" value="checkbox 1"/>Banana Langka Pie
      <input type="checkbox" value="checkbox 2"/>Peach Mango Pie
    </div>
    
    <div>
      <label class="one-line">Special order notes?</label>
      <textarea class="form-control"></textarea>
    </div>
    
    <input type="submit" id="submit" class="form-control"/>
  </form>
  </div>
</body>

How can I add a semi-transparent rectangular background behind the survey form?

1 Answers1