Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="service">
  <div class="container">
    <h2><span>Auditing Services</span></h2>
    <span class="text">We make sure you comply with the law</span>
  </div>
  <img src="https://farm4.staticflickr.com/3052/2824190020_e5e53ff7ac_o.jpg" />
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.12)
// Compass (v1.0.0.alpha.21)
// Susy (v2.1.3)
// ----

@import "susy";

div.service {
  z-index: 1;
  @include container(80em);
  img {
    width: 100%;
    height: 100%;
  }
}

div.container {
  z-index: 10;
  @include container(60em);
  position: absolute;
  left: 30%;
  top: 30%;
  h2 {
    span {
      background: rgba(250, 5, 5, 0.8);
      color:  #111;
      padding: 5px;
      font-size: 34px;
      &:after {
        padding-left: 5px;
        content:"\003e";
      }
    }
  }
  span.text {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    font-size: 40px;
  }
}

SassMeister-output.css

div.service {
  z-index: 1;
  max-width: 80em;
  margin-left: auto;
  margin-right: auto;
}
div.service:after {
  content: " ";
  display: block;
  clear: both;
}
div.service img {
  width: 100%;
  height: 100%;
}

div.container {
  z-index: 10;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  left: 30%;
  top: 30%;
}
div.container:after {
  content: " ";
  display: block;
  clear: both;
}
div.container h2 span {
  background: rgba(250, 5, 5, 0.8);
  color: #111;
  padding: 5px;
  font-size: 34px;
}
div.container h2 span:after {
  padding-left: 5px;
  content: "\003e";
}
div.container span.text {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
  font-size: 40px;
}

SassMeister-rendered.html

<div class="service">
  <div class="container">
    <h2><span>Auditing Services</span></h2>
    <span class="text">We make sure you comply with the law</span>
  </div>
  <img src="https://farm4.staticflickr.com/3052/2824190020_e5e53ff7ac_o.jpg" />
</div>