Bootstrap container background can only be white or some other color/image but not transparent
<p>Every text element in my html file either inside the bootstrap's container or another div will not be transparent from what I've tried: background:transparent !important, background-color with rgba opacity, and adding opacity itself.</p>

<p>Here's the HTML + CSS:</p>

<pre><code>html { 
    background: url(background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@font-face {
  font-family: "elephant";
  src: url("elephnt.ttf");
}

#frontpage{
  background: transparent; 
}

@media(max-width: 480px) {
  h1 {
    font-size: 12pt;
  }
}
#title
{
color: rgb(255, 255, 255);
font-size: 50px;
text-shadow: rgb(3, 3, 3) -1px 4px 9px;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="container-fluid" style="background:transparent;" &gt;


 &lt;h1 id="title"&gt;Butt&lt;/h1&gt;


&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p></p>