title: Adding background image as a new section to a Bootstrap Site
body: <p>Been struggling with trying to add a background image to my Bootstrap site. I am trying to sandwich it between two existing sections.</p>
  
  <p>When inspecting many homepages with background images, they have the class but also the style code in the HTML as well as the CSS.</p>
  
  <p>This is the type of thing I am trying to add, excluding the slider
  <a href="http://themesquared.com/flathost" rel="nofollow">http://themesquared.com/flathost</a> (div class is jumbotron masthead)
  <a href="http://themesquared.com/flathost/wp-content/uploads/2015/03/header-bg.jpg" rel="nofollow">http://themesquared.com/flathost/wp-content/uploads/2015/03/header-bg.jpg</a></p>
  
  <p>To then some overlay text to the background image, do I need in this order:
  Container, Row Class, Background Image Class,Overlay Text Class with col positions </p>
  
  <p>Is both the style needed in CSS and HTML with background images?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="solution5"&gt;
  &lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-12"&gt;
  &lt;div class="col-6 push-1"&gt;&lt;a href="/link1"&gt;
  &lt;h1&gt;Link text&lt;/h1&gt;&lt;h2&gt;2nd text block&lt;/h2&gt;
  &lt;a href="/link2" class="Link2"&gt;Up to 40% off&lt;/a&gt;
  &lt;a href="/link3" class="Link3"&gt;Discover more&lt;/a&gt;
  &lt;a href="/link4" class="col-3 push-1"&gt;&lt;ul class="Link4"&gt;&lt;li&gt;Free Bag&lt;/li&gt;     &lt;li&gt;Free Delivery&lt;/li&gt;&lt;/ul&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.solution5 {
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: inherit;
  z-index: 20;
  background-image: url(http://example.com/img/solution5.jpg);
  background-color: rgba(0, 0, 0, 0);
  background-size: cover;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  </code></pre>