title: How to replace black in Semantic UI masthead with color?
body: <p>I'm trying to replace the black color at the masthead of my webpage with an image. The following is a screenshot of what I currently have:</p>
  
  <p><a href="https://i.stack.imgur.com/XPmsp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XPmsp.png" alt="enter image description here"></a></p>
  
  <p>Basically, I'd like the black replaced with a background image. Currently, the HTML for the body is as follows:</p>
  
  <pre><code>&lt;body&gt;
      &lt;!-- Following Menu --&gt;
      &lt;div class="ui large top fixed hidden menu"&gt;
          &lt;div class="ui container"&gt;
              &lt;div class="left menu"&gt;
                  &lt;div class="item"&gt;
                      Justin Cheung
                  &lt;/div&gt;
                  &lt;a class="active item"&gt;About Me&lt;/a&gt;
                  &lt;a class="item"&gt;My Projects&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="placeholder" class="container"&gt;
          &lt;div class="ui inverted vertical masthead center aligned segment"&gt;
              &lt;div class="ui container"&gt;
                  &lt;div class="ui large secondary inverted pointing menu"&gt;
                      &lt;div class="left menu"&gt;
                          &lt;a class="active item"&gt;About Me&lt;/a&gt;
                          &lt;a class="item"&gt;My Projects&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;h1&gt;This site is under construction -__-'&lt;/h1&gt;
      &lt;p&gt;
          This website is currently under construction. In the meantime, feel free to visit the 
          geese nesting within the boundaries of the University of Waterloo :)
      &lt;/p&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I also have the following CSS:</p>
  
  <pre><code>.hidden.menu {
  display: none;
  }
  
  .masthead.segment {
      min-height: 700px;
      padding: 1em 0em;
  }
  
  .masthead .logo.item img {
      margin-right: 1em;
  }
  
  .masthead .ui.menu .ui.button {
      margin-left: 0.5em;
  }
  
  .masthead h1.ui.header {
      margin-top: 3em;
      margin-bottom: 0em;
      font-size: 4em;
      font-weight: normal;
  }
  
  .masthead h2 {
      font-size: 1.7em;
      font-weight: normal;
  }
  
  .ui.vertical.stripe {
      padding: 8em 0em;
  }
  
  .ui.vertical.stripe h3 {
      font-size: 2em;
  }
  
  .ui.vertical.stripe .button + h3,
  .ui.vertical.stripe p + h3 {
      margin-top: 3em;
  }
  
  .ui.vertical.stripe .floated.image {
      clear: both;
  }
  
  .ui.vertical.stripe p {
      font-size: 1.33em;
  }
  
  .ui.vertical.stripe .horizontal.divider {
      margin: 3em 0em;
  }
  
  .quote.stripe.segment {
      padding: 0em;
  }
  
  .quote.stripe.segment .grid .column {
      padding-top: 5em;
      padding-bottom: 5em;
  }
  
  .footer.segment {
      padding: 5em 0em;
  }
  
  .secondary.pointing.menu .toc.item {
      display: none;
  }
  
  @media only screen and (max-width: 700px) {
      .ui.fixed.menu {
          display: none !important;
      }
      .secondary.pointing.menu .item,
      .secondary.pointing.menu .menu {
          display: none;
      }
      .secondary.pointing.menu .toc.item {
          display: block;
      }
      .masthead.segment {
          min-height: 350px;
      }
      .masthead h1.ui.header {
          font-size: 2em;
          margin-top: 1.5em;
      }
      .masthead h2 {
          margin-top: 0.5em;
          font-size: 1.5em;
      }
  }
  
  #placeholder {
      background-image: url("background.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
  }
  </code></pre>
  
  <p>I've tried adding <code>id="placeholder"</code> to the container shown above, expecting that the background would be replaced with <code>background.jpg</code>; however, this has no effect. I've been stuck on this problem for several hours now.</p>
  
  <p>Any help would be greatly appreciated.</p>