JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="content">
    <p>
      I have set an html background image, is it possible to give it a z-index so that it will be on top of the other images in the content?
    </p>
  </div>
</div>

CSS

body {
  background-color: yellow;
}

.wrapper {
  margin: 100px 100px;
  width: 60%;
  position: relative;
  border: 1px solid red;
  border-top: none;
}

.content:after {
  position: absolute;
  top: -1px;
  left: -1px;
  background-color: red;
  content: '';
  height: 1px;
  width: 100%;
  z-index: -2;
  padding-right: 2px;
}
.content:before {
  content: '';
  width: 300px;
  height: 200px;
  background-image: url('http://images.mentalfloss.com/sites/default/files/styles/article_640x430/public/catffaceheader.jpg');
  background-size: cover;
  position: absolute;
  top: -30px;
  right: 10px;
  z-index: -1;
}

p {
  text-align: left;
  width: 150px;
}