title: How do I make the style="background-image: url()" in the html div go into css so that I could style it?
body: <p>How do I make the style="background-image: url()" in the html div go into css so that I could style it? I tried putting it in different divs, but I keep doing something wrong. Since it's class is two words, I can't style that for some reason... Would I have to style it in html? </p>
  
  <p>Here is what I'm working with: </p>
  
  <pre><code>    &lt;div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active" style="background-image: url(images/logo.png)" &gt;
        &lt;div class="caption"&gt;
          &lt;h1 class="animated fadeInLeftBig"&gt;The **** Organization  &lt;/h1&gt;
          &lt;p class="animated fadeInRightBig"&gt;****&lt;/p&gt;
          &lt;a data-scroll class="btn btn-start animated fadeInUpBig" href="#rescue"&gt;****&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit--Some of you have asked for the css for the html, so here it is also</p>
  
  <pre><code>#home-slider {
    overflow: hidden;
    position: relative;
    attachment: fixed;
    size: cover;
    repeat: no-repeat;
    width: 100%;
    height: 100vh;
  
  }
  
  
  
  #home-slider .caption {
    position: absolute;
    top: 50%;
    margin-top: -104px;
    left: 0;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    z-index: 15;
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    vertical-align: center;
    height: 100vh;
    font-size: 2em;
  }
  
  #home-slider .caption h1 {
    color: #fff;
    size: 72px;
    font-weight: 800;
    margin-bottom: 30px;
    vertical-align: center;
  
  }
  
  
  .item, .active { background-image: url(images/logo.png); } {
    height: 100vh;
    width: 100vh;
  }
  
  .item { background-image: url(images/logo.png); } {
    height: 100vh;
    width: 100vh;
  }
  
  .active { background-image: url(images/logo.png); } {
    height: 100vh;
    width: 100vh;
  }
  
  
  
  .caption .btn-start {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding:14px 40px;
    border: 2px solid #6e6d6c;
    border-radius: 4px;
    margin-top: 40px;
    vertical-align: center;
  }
  
  .caption .btn-start:hover {
    color: #fff
  }
  
  .carousel-fade .carousel-inner .item {
    opacity: 0;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    /*  just in case if I want the image to be "parallax"
    background-attachment: fixed;
    */
    background-position: center;
    background-color: #6e6d6c;
  
  }
  
  
  
  .carousel-fade .carousel-inner .active {
    opacity: 1;
    background-size: 100%;
  }
  
  .carousel-fade .carousel-control {
    z-index: 2;
  }
  </code></pre>