Bootstrap Color Wash block With Responsive Photo

by Nate Armstrong

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--*
    *  Background image is reponsive at col-sm and fits width 100% or height 100% responsively
    *  Wash-color is OCU Blue with Opacity 0.80
    *  class=reverse changes color to white
    *-->
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 wash">
      <div class="wash-container container">
          <div class="washimage" style="background-image: url('http://test.ohiochristian.edu/sites/default/files/church_auditorium.jpg');"></div>
          <div class="wash-colorblock"></div>
        
        <div class="wash-content row">
          <div class="col-xs-12 col-sm-9 reverse">
          <h2>About Us</h2>
<p><span itemprop="name">Ohio Christian University</span> is committed to offering a complete education that develops students intellectually, professionally, and spiritually. OCU offers degree programs for <a href="/residential-undergraduate/residential-undergraduate-programs">residential undergraduate students</a>, <a href="/adult-graduate-studies/graduate-degrees-ohio-christian-university">graduate students</a>, <a href="/adult-degree-programs">adult and online students</a>. The <a href="/dual-enrollmentcollege-credit-plus/trailblazer-academy">Trailblazer Academy</a> allows high school students to complete college classes. All programs are designed to equip students to become leaders in their careers, communities, families, and the world.</p>
          </div>
          <div class="col-xs-12 col-sm-3 reverse">
          Not about us.  This stuff here, which is about nothing really at all.  And maybe a little more of nothing would do some good to fill in this area, therefore it exists.  Not - quite, to the bottom -- urg - almost.  Maybe just a...

CSS

.wash {
  margin: 0px;
  padding: 0px;
}

.reverse{
  color:white;  
}

.wash-content p {
  position: relative;
  top: 0;
}

.wash-container {
  display: block;
  overflow: hidden;
  border: 5px green solid;
  padding: 20px;
  margin: auto auto;
  
}

.wash-container > img {
  padding: 0px;
  margin: 0px;
}

.wash-colorblock {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.8;
  background-color: #215a94;
}

.washimage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-color:black;
}

@media screen and (max-width:767px){
  .washimage{
   background-size: auto 100%;
   }
   
   .responsive{
     background-color:red;
   }
   
   .sm{
     display :none;
   }
}

@media screen and (min-width:768px){
   .washimage{
   background-size: 100% auto;
   }
   
   .responsive{
     background-color:green;
   }
   
   .xs{
     display :none;
   }

}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */