Background-image: not showing in CSS

I'm having a problem with getting a background-image to show within a flexbox. Whenever I enter it manually in the HTML it shows the image, however... When I try to load it as background-image: url("imagepath") it won't load.

This is the CSS:

* {
  box-sizing: border-box;
}


/*Style van overall body*/

body {
  margin: 0;
  background-color: #f3f3f3;
  color: white;
}


/*Style voor h2 tekst*/

h2 {}


/* Style the header */

.header {
  background-color: #999999;
  padding: 50px;
  text-align: center;
}


/* Container for flexboxes */

.row {
  display: -webkit-flex;
  display: flex;
}

.contentrow {
  display: -webkit-flex;
  display: flex;
}


/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */

.column {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0px;
  text-align: center;
}
.newsboxtop{
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 3px;
  background: url("images/Lightgraydient75x30.png");
  text-align: center;
  height: 30px;
}

.middlemenu {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0px;
  height: 50px;
  text-align: center;
  margin: 0px;
}


/* Container for newsboxes */

.newsrow {
  display: -webkit-flex;
  display: flex;
}

.newsbox {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-top: 30px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 30px;
  min-width: 200px;
  height: 225px;
  text-align: center;
  background-color: #999999;

}


/* Style van de footer. */

.footer {
  background-color: #999999;
  padding: 10px;
  text-align: center;
}


/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/

@media (max-width: 1280px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

  @media (max-width: 1500px){ 
  .newsrow {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

And this is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="header">
  <h2>234234</h2>
</div>

<div class="row">
  <div class="column" style="background-color:#444; padding: 10px;">1337 WHEH</div>
  <div class="column" style="background-color:#555; flex-grow: 4;">
    <div class="middlemenu" style="background-color:#777">
      <!--Hier komt menu content-->
    </div>
    <div class="newsrow">
      <div class="newsbox">
        <div class="newsboxtop">
            <!--////////////////////////////////////////////////////-->
            <!-- images/Lightgraydient75x30.png This is for testing -->
            <!--////////////////////////////////////////////////////-->
            asd
        </div>
      </div>
      <div class="newsbox">
        <div class="newsboxtop">
            dfg
        </div>
      </div>
      <div class="newsbox">
        <div class="newsboxtop">
            ghj
        </div>
      </div>
    </div>
  </div>
  <div class="column" style="background-color:#666; padding: 10px;">1337 WHEEEH</div>
</div>
<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

Please let me know if I'm overlooking something, or if I'm using CSS the wrong way, thank you so much.

Solution

Have you tried

background: url("../images/Lightgraydient75x30.png");