title: How to make background image in Bootstrap 4 carousel full-width?
body: <p>I have a 2 slide carousel that I've written with Bootstrap 4. Each slide has an image as its background, but I'm having trouble making these images full width.</p>
  
  <p>Usually I'd use <code>background-size: cover</code>, <code>background-attachment: fixed;</code> and <code>background-repeat: no-repeat</code> to achieve a similar effect on a webpage, but I can't get this to work with the carousel.</p>
  
  <p>My code is below. I've tried to apply the background size, attachment and cover to the following classes: <code>.carousel</code>, <code>.carousel-inner</code>, <code>.carousel-item</code>, and <code>img</code> within the carousel. </p>
  
  <pre><code>&lt;div id="officeCarousel" class="carousel slide" data-ride="carousel" style="width:100%;"&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#officeCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#officeCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
        &lt;div class="carousel-item active"&gt;
          &lt;img class="d-block img-fluid" src="office1.png" alt="First slide"&gt;
          &lt;div class="carousel-caption d-none d-md-block"&gt;
            &lt;div class="card card-inverse card-success mb-3 text-center"&gt;
              &lt;div class="card-block"&gt;
                &lt;h4 class="card-title"&gt;Office 1&lt;/h4&gt;
                &lt;p class="card-text"&gt;Work from the heart of the newly renovated area.&lt;/p&gt;
                  &lt;a href="#" class="card-link"&gt;About this office&lt;/a&gt;
  &lt;a href="#" class="card-link"&gt;Book this office&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;img class="d-block img-fluid" src="office2.jpg" alt="Second slide"&gt;
          &lt;div class="carousel-caption d-none d-md-block"&gt;
            &lt;div class="card card-inverse card-success mb-3 text-center"&gt;
              &lt;div class="card-block"&gt;
                &lt;h4 class="card-title"&gt;Office 2&lt;/h4&gt;
                &lt;p class="card-text"&gt;Work from this inner-city rural village.&lt;/p&gt;
                  &lt;a href="#" class="card-link"&gt;About this office&lt;/a&gt;
  &lt;a href="#" class="card-link"&gt;Book this office&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="carousel-control-prev" href="#officeCarousel" 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="#officeCarousel" 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>Any help much appreciated!</p>
  
  <p>Edit: CSS for relevant sections below. This is default V4 Bootstrap CSS.</p>
  
  <pre><code>.carousel {
    position: relative;
  }
  
  .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden
  }
  
  .carousel-item {
    position: relative;
    display: none;
    width: 100%
  }
  </code></pre>