title: Same banner on every page, different CSS class for each
body: <p>I'm having a small issue. I am making a site using many banners of same size on identical pages, each one representing a different industry. So its just a matter of replacing images and text. </p>
  
  <p>My banner images are part of a "Banner CSS" class, but I don't know how to use different images without copying and pasting my "Banner CSS" class every time. I'd prefer to keep my CSS clean and use one class for all the banners. Every time I try and use HTML to import the photo   it either doesn't appear, or doesn't function the way I'd like it to. (Responsive and Cropping at a min-height"</p>
  
  <hr>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;div id=industries-strip&gt; 
  &lt;div class="resp-auto"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the current CSS</p>
  
  <pre><code>#industries-strip {
  position: relative;
  overflow: hidden;
  width:100%;
  height:100%;
  padding-bottom: 27%;
  min-height: 250px;
  z-index: 6;
  
  
  .resp-auto {
  display: inline;
  background-image: url("../img/strip-industries-automotive.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover;
  height: 100%;
  width: 100%;
  float:bottom;
  position:absolute;
  }
  </code></pre>
  
  <p>Currently my banner shrinks responsively, until a certain height, then begins to crop at the sides, and this is my goal. But I'd like to be able to do this on other pages and not make my CSS page a long mess. </p>
  
  <p>Thanks</p>