title: How to add background image to row using bootstrap 4
body: <p>I have been attempting to add a background image to a row class from bootstrap 4.1 but have not been able to even have the image display anywhere on the page. Any solution that I have seen online has not worked.</p>
  
  <p>I am using </p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css\overwrite.css"&gt;
  </code></pre>
  
  <p>and all of the JS links are at the end of my body tag.</p>
  
  <pre><code>&lt;!-- jQuery library --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Popper JS --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is my html code</p>
  
  <pre><code>&lt;div id ="diagL" class ="row text-center"&gt;
  &lt;div class ="col-sm-6"&gt;
    &lt;p id="txtzoom" class ="display-1 font-weight-bold"&gt;ART.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class ="col-sm-6"&gt;
    &lt;p id="txtzoom" class ="display-1 font-weight-bold text-warning"&gt;SCIENCE.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>As for my CSS code, I have modified it over and over again in attempts to try to get the image to display</p>
  
  <pre><code>#diagL{
   z-index:99;
   position:absolute;
   background: transparent !important;
   background: url("../images/BG/DiagnolL.jpg") !important;
   background: no-repeat !important;
   background: center center;
   background: cover !important;
  }
  </code></pre>
  
  <p>Things I have tried:</p>
  
  <ul>
  <li><p>Using a different container such as: container, container-fluid, d-flex or simply just div on its own.</p></li>
  <li><p>Trying to url() my image differently such as:  url("/images/BG/DiagnolL.jpg") <em>this is the exact directory copied from "Copy Project Path"</em></p></li>
  <li><p>Attempting to add the CSS directly to the html inline "style =' ...'" </p></li>
  </ul>
  
  <p>Note: I have attempted adding a background color to the container and it works perfectly fine but I would ideally like to have the background image display across the entire row container.</p>
  
  <p>At this point, I believe I have tried everything except trying to use javascript but I would not be entirely sure as to how to apply that. If someone could let me know if it is not possible so that I can move on and try something else, I would greatly appreciate it.</p>