<article class="image">
  <h1>Image Article</h1>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis cupiditate quam excepturi, quod tenetur impedit possimus dignissimos sed! Cum corporis alias sapiente dolorem, iure voluptatum laborum sunt maxime quidem delectus!</p>
</article>

<article class="gradient">
  <h1>Gradient Article</h1>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis cupiditate quam excepturi, quod tenetur impedit possimus dignissimos sed! Cum corporis alias sapiente dolorem, iure voluptatum laborum sunt maxime quidem delectus!</p>
</article>

body {
  font-size: 1.5rem;
  padding: 1rem;
  background: #f2f2f2;
}

article {
  margin: 2rem;
  padding: 2rem;
  background: white;
}

.image::before {
  content: url(//unsplash.it/2000/200);
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.gradient::before {
  content: linear-gradient(#e66465, #9198e5);
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
}