title: Background-size: cover not working in Bootstrap 4
body: <p>I'm currently using Carousel property for my website and I'm not able to use background-size: cover, in order for the pictures in my carousel to "stretch" to the full size of the browser. How do I go around that?</p>
  
  <p>Note: The reason why I did what I did below in my code block is because, the images are too big so I did "w-auto", to resize the image to how it looks now. </p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;div id="carouselExampleControls" class="carousel slide" data-ride="carousel"&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;div class="carousel-item active"&gt;
      &lt;div class="cover"&gt;
        &lt;img class="d-block w-auto" src="./assets/img/mcdonalds/2.jpg" alt="First slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="carousel-item"&gt;
      &lt;div class="cover"&gt;
        &lt;img class="d-block w-auto" src="./assets/img/mcdonalds/3.jpg" alt="Second slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="carousel-item"&gt;
      &lt;div class="cover"&gt;
        &lt;img class="d-block w-auto" src="./assets/img/mcdonalds/4.jpg" alt="Third slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"&gt;
    &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"&gt;
    &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my CSS code:</p>
  
  <pre><code>.cover {
    background-size: cover;
  }
  </code></pre>