stackoom
  简体   繁体   中英

Background-image: not showing in CSS

 原文  2017-11-14 13:29:13  8   3    html/ css/ background-image

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.

3 answers

solution1
 5 ACCPTED  2017-11-14 13:32:43

你有没有尝试过

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

solution2
 0  2017-11-14 13:36:28

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

solution3
 0  2017-11-14 13:45:27

代码对我来说似乎很好。转到chrome devtools-> network选项卡-> img部分并相应地修复路径。

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question CSS: Background-image not showing CSS background-image not showing background-image not showing in css Background-image not showing with CSS CSS background-image not showing background-image property is not showing the image in css CSS background-image not showing my image Css background-image not showing up at all CSS background-image not showing on Mobile browsers CSS Background-Image not showing up
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM