title: Bootstrap carousel slider content container - adding offset background
body: <p>Title may be a little vague, apologies. Before I start I am using pure Bootstrap latest version (<a href="https://getbootstrap.com/" rel="nofollow noreferrer">https://getbootstrap.com/</a>). There's nothing more.</p>
  
  <p>Essentially, I am trying to recreate this for a client:</p>
  
  <p><a href="https://i.stack.imgur.com/iwtB8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iwtB8.jpg" alt="enter image description here"></a></p>
  
  <p>So far I have this:</p>
  
  <p><a href="https://i.stack.imgur.com/JRrs4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JRrs4.png" alt="enter image description here"></a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"&gt;
  &lt;section&gt;
        &lt;div class="col-md-8 offset-md-2"&gt;
          &lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"&gt;
            &lt;div class="carousel-inner"&gt;
              &lt;div class="carousel-item active"&gt;
                &lt;img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt=""&gt;
                &lt;div class="col-md-6 offset-md-6"&gt;
                  &lt;div class="carousel-caption d-none d-md-block"&gt;
                    &lt;h2 class="p-2" style="text-align: left !important;"&gt;Title&lt;/h2&gt;
                    &lt;p style="text-align: left !important;"&gt;Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.&lt;/p&gt;
                    &lt;p style="text-align: right !important;"&gt;Read More...&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item"&gt;
                &lt;img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt=""&gt;
                &lt;div class="col-md-6 offset-md-6"&gt;
                  &lt;div class="carousel-caption d-none d-md-block"&gt;
                    &lt;h2 class="p-2" style="text-align: left !important;"&gt;Title&lt;/h2&gt;
                    &lt;p style="text-align: left !important;"&gt;Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.&lt;/p&gt;
                    &lt;p style="text-align: right !important;"&gt;Read More...&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item"&gt;
                &lt;img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt=""&gt;
                &lt;div class="col-md-6 offset-md-6"&gt;
                  &lt;div class="carousel-caption d-none d-md-block"&gt;
                    &lt;h2 class="p-2" style="text-align: left !important;"&gt;Title&lt;/h2&gt;
                    &lt;p style="text-align: left !important;"&gt;Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.&lt;/p&gt;
                    &lt;p style="text-align: right !important;"&gt;Read More...&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item"&gt;
                &lt;img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt=""&gt;
                &lt;div class="col-md-6 offset-md-6"&gt;
                  &lt;div class="carousel-caption d-none d-md-block"&gt;
                    &lt;h2 class="p-2" style="text-align: left !important;"&gt;Title&lt;/h2&gt;
                    &lt;p style="text-align: left !important;"&gt;Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.&lt;/p&gt;
                    &lt;p style="text-align: right !important;"&gt;Read More...&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6 offset-md-6"&gt;
                &lt;ol class="carousel-indicators"&gt;
                  &lt;li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                  &lt;li data-target="#carouselExampleIndicators" data-slide-to="1"&gt;&lt;/li&gt;
                  &lt;li data-target="#carouselExampleIndicators" data-slide-to="2"&gt;&lt;/li&gt;
                  &lt;li data-target="#carouselExampleIndicators" data-slide-to="3"&gt;&lt;/li&gt;
                &lt;/ol&gt;
                &lt;a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"&gt;
                  &lt;span class="align-text-bottom"&gt;&lt;i class="fas fa-angle-left fa-3x"&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                &lt;/a&gt;
                &lt;a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"&gt;
                  &lt;span class="align-text-bottom"&gt;&lt;i class="fas fa-angle-right fa-3x"&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The issue I am having is getting an overlay to mask the image slightly whilst being placed underneath the carousel controls/text...</p>
  
  <p>Is anyone able to give some direction as to how I could do this...?</p>