title: Responsive background image in bootstrap container
body: <p>I'm using multiple containers so I can have unique transparent image in them. </p>
  
  <p>I want the background image in them to be responsive and to keep ratio, I found a lot of suggestions to put <code>background-size: cover;</code> but it doesn't work for me. I can't get the image to be responsive.</p>
  
  <p>what I've tried:   </p>
  
  <pre><code>  object-fit: contain;    
    -webkit-background-size: cover;     
    -moz-background-size: cover;    
    -o-background-size: cover;    
    background-size: cover;            
    flex: 1;     
  </code></pre>
  
  <p>css code:    </p>
  
  <pre><code> .container{
    display: block;
    position: relative;
  }
  
   .container1::after {
    content: "";
    background: url(bg2.jpg);
    background-repeat:no-repeat;
    background-position: center center;
    opacity: 0.3;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1; 
    object-fit: contain;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    flex: 1; 
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="container container1"&gt;
  &lt;p&gt; some text &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>