Background-image: not showing in CSS

Question

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.

It should be something with the background image path. First you try with full path image check if the image is loading. So you can find out whether the issue was with code or path. — Rijo
– Rijo, Commented Nov 14, 2017 at 13:35
This question, lately, has been asked over and over again and the solutions all boil down to one of the same three, typically. I suggest you search SO, or at least the internet, and you'll find your solution easily. — Rob
– Rob, Commented Nov 14, 2017 at 13:39

buzzfizz · Accepted Answer · 2017-11-14 13:32:43Z

5

Have you tried

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

answered Nov 14, 2017 at 13:32

buzzfizz

864 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Wiedeman Over a year ago

Well that did work perfectly. However I used the image in the HTML first which didn't need to ../ because it's in a folder above the CSS one. Thank you very much.. >,<

buzzfizz Over a year ago

The url will always be relative of the current file it is in. So if you put css in a folder then you have to go up one folder and enter the images folder. Hence use .. to go out of the folder.

Super User · Accepted Answer · 2017-11-14 13:36:28Z

background-image is working fine, you have to set div height as per your image. check updated snippet below...

* {
  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(https://dummyimage.com/500x800/ff0000/000000.png&text=);
  text-align: center;
  height: 30px;
  background-size: cover;
}

.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;
  }
}

<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>

Collectives™ on Stack Overflow

Background-image: not showing in CSS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related