<div class="container">
  <h1>My background color is black</h1>
  <div class="el el-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
  </div>
  <div class="el el-2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
  </div>
  <div class="el el-3">
    I also have a background image set but the URL is invalid so the background color shows.
  </div>
  <p>
    The following has a background image with lots of transparent areas. The background color shows through these areas.
  </p>
  <div class="el-4"></div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

h1 {
  background-color: black;
  color: white;
  padding: 20px;
}

.el {
  padding: 20px;
  margin-bottom: 20px;
}

.el-1 {
  background-color: salmon;
  color: white;
}

.el-2 {
  background-color: rgb(133, 98, 167);
  color: white;
}

.el-3 {
  background-image: url(some/invalid/image.jpg);
  background-color: hsla(100, 30%, 50%, 0.9);
  color: white;
}

.el-4 {
  width: 100%;
  height: 400px;
  background-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-color/sun.png);
  background-color: #0099cc;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  color: white;
}