title: Background bigger than the div
body: <p>I have a div : </p>
  
  <pre><code>&lt;div class="titre_section" id="identity_section_titre_section"&gt;Identité du déclarant&lt;/div&gt;
  </code></pre>
  
  <p>i need to put a background outside the div to apply a bigger height than the div</p>
  
  <p>for the moment i have : </p>
  
  <pre><code>.titre_section {
          position: relative;
  
          @include media-breakpoint-down(sm) {
              top: -2em;
          }
          top: -5em;
          left: -2em;
          padding-left: 20px;
          font-family: $titre_section-font-family;
          font-style: normal;
          font-weight: bold;
          font-size: 22px;
          line-height: 25px;
          letter-spacing: 0.25px;
          color: $form-dark-color;
          background: url("/custom/images/titre_section_rectangle.png") no-repeat;
          background-size: contain;
      }
  </code></pre>
  
  <p>here the result : </p>
  
  <p><a href="https://i.stack.imgur.com/tpe6E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tpe6E.png" alt="enter image description here"></a></p>
  
  <p>i tried to make this in order to modify the height of the background : </p>
  
  <pre><code>.titre_section::before{
              content: "";
              background: url("/custom/images/titre_section_rectangle.png") no-repeat;
              background-size: contain;
          }
  </code></pre>
  
  <p>but it's not working i don't see the background.</p>
  
  <p>the result need to be like. i can't edit the html because we use zend form system</p>
  
  <p><a href="https://i.stack.imgur.com/2Xg0J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Xg0J.png" alt="enter image description here"></a></p>