background-image not loading

Question

For some reason it was working before, but I haven't changed anything in these files, and the background-image stopped loading. I mocked up a codepen to re-produce the problem:

https://codepen.io/jamespagedev/pen/WYNPYv

HTML5:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>UI Project Wk - Home</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  </head>

  <body>
    <div class="coming-soon">
      <div class="notice">
        <h1>COMING SOON</h1>
        <hr>
        <p id="countdown-clock" style="font-size:30px"></p>
      </div>
    </div>
  </body>
</html>

CSS:

.coming-soon {
  background-image: url('https://www.w3schools.com/w3images/forestbridge.jpg');
  height: 100%;
  background-position: center;
  background-size: cover;
  position: relative;
  color: white;
  font-family: "Courier New", Courier, monospace;
  font-size: 25px;
}

.notice {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

hr {
  margin: 50px auto;
  width: 40%;
}

Can anyone tell me why background-image isn't showing up?

If you had inspected your dom you would know that the `.coming-soon` element has a `height` of 0. You can either your `html` and `body` height to be 100%. or set your `coming-soon` height to be `100vh` — Swann, Nov 04 '18 at 03:47

score 3 · Accepted Answer · answered Nov 04 '18 at 03:46

3

To use height: 100%; the parent element must have a defined height. In the codepen, adding this works:

html, body {
    height: 100%;
}

answered Nov 04 '18 at 03:46

Conman_123

471
3
9

Thank you so much. I thought I had this included automatically in my globals.less file. But nope. I now understand why setting the height is so important, because my default reset has `body` set to `line-height:1;` – Fiddle Freak Nov 04 '18 at 03:57

score 0 · Answer 2 · answered Nov 04 '18 at 04:05

0

Height of Html and body tag is not define. That's why your image is not render properly. you need to add height of html and body tag.

html,body {
  height:100%;
}

You can check updated codepen. link

answered Nov 04 '18 at 04:05

baj9032

2,414
3
22
40

score 0 · Answer 3 · answered Nov 04 '18 at 04:40

0

seems you have given height:100% for .coming-soon class. Give the height value in px or pt instead of giving value in %. For example.

.coming-soon {height:700px}
.coming-soon {height:100vh} /*Background will be applied for the whole vieport height.*/

answered Nov 04 '18 at 04:40

Sivaprakash D

318
1
4
17

background-image not loading

3 Answers3