JSFiddle - React, Tailwind, and code Playground

HTML

<div class="home">
        <div class="bg-text1" id="block1">
          <b-container class="container2 ">
            <b-row style="margin-left: 10px">
              <h1><b-link
                href="https://www.nature.com/articles/s41598-018-35492-3"
                class="link"
                target="_blank"
                >Web Application of SPIR - Smart Photo Identification
                 of the Risso’s dolphin </b-link
              ></h1>
              <h5>
              <p>
                Using this web application of SPIR (see <b-button style="border-radius: 6px; padding-bottom: 0px; padding-top: 0px; border: 1px solid #FFFFFF" variant="danger">Tool</b-button> button), 
                you can automatically photo-identify Risso's dolphins in your photos, using computer vision techniques and advanced statistical strategies. 
              </p>
              </h5>
            </b-row>
    </div>

CSS

html {
  height: 100%;
}
body {
  height:100%;
}
.home {
  width: 100%;
  height: 100%;
  left: 0;
  background: url("https://placekitten.com/100/100") no-repeat center top; 
  z-index: -1;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bg-text1 {
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0, 0.7);
  color: white;
  font-weight: bold;
  padding: 20px;
}