title: How to change the background-color of jumbrotron?
body: <p>I want to know how to change the background-color of 'jumbotron' class, it has a default <code>background-color #eee</code> in bootstrap.css. </p>
  
  <p>I tried to override by erasing this and giving the attribute <code>none</code>,<code>none !important</code>, <code>transparent</code> into my custom css and still doesn't work. </p>
  
  <p>I tried inspecting the element in the browser window and removing the property there to see if there was any change, it's still the same problem.</p>
  
  <p>It will adopt any other color, except removing the color entirely. The reason I'm asking this is because I have a full background image and want jumbotron to simply transparent with no background or color to it. Unless, </p>
  
  <p>I'm missing something from the BootStrap 3.1.1 documentation in which I checked there as well.</p>
  
  <p><strong>NOTE: I would use jsfiddle.net to easily show you, but it doesn't support 3.1.1 and not sure how to implement bootstrap into it.</strong></p>
  
  <p><strong>HTML</strong></p>
  
  <p>
  
  </p>
  
  <p>
      
      
      
      </p>
  
  <pre><code>&lt;title&gt;Full Page Image Background Template for Bootstrap 3&lt;/title&gt;
  
  &lt;!-- Bootstrap core CSS --&gt;
  &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
  
  &lt;!-- Custom CSS for the 'Full' Template --&gt;
  &lt;link href="css/full.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;!--Displays the Navigation Bar Style--&gt;
  &lt;div class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;!--Displays the Navigation Bar Content--&gt;
      &lt;div class="navbar-header"&gt;
          &lt;!-- displays the icon bar in responsive view; when clicked reveals a list--&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"&gt;
              &lt;!-- displays the icon bars in responsive view;--&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;!--Brand, Logo of your website--&gt;
          &lt;a class="navbar-brand" href="#"&gt;Virtual Productionz, Inc.&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Allows collapse/show navbar in responsive view--&gt;
      &lt;div class="navbar-collapse collapse navbar-responsive-collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;!-- Dropdown menu--&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Products &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Integrated Laser Keyboard&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;More...&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="jumbotron"&gt;
      &lt;h1&gt;Welcome!&lt;/h1&gt;
      &lt;p&gt;We're an awesome company that creates virtual things for portable devices.&lt;/p&gt;
      &lt;p&gt;&lt;a class="btn btn-primary btn-lg" role="button"&gt;Learn more&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;!-- JavaScript --&gt;
  &lt;script src="js/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p><strong>CSS</strong> (w/ bootstrap.css)</p>
  
  <pre><code>@import url("bootstrap.min.css");
  @import url("bootstrap-theme.css");
  
  body {
  margin-top: 50px; /* 50px is the height of the navbar - change this if the navbarn height changes */
  }
  
  .full {
   /*background: url(http://placehold.it/1920x1080) no-repeat center center fixed;*/
   background: url("../images/laser_keyboard.jpg") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
  }
  
  .jumbotron{
  color: #FFFFFF;
  /*background-color:none !important;*/
  }
  </code></pre>