Background image not working although path is correct

Question

I'm trying to clone a website in my local environment. For some reason, background image doesn't show even though the path is correct as shown in the jpg below.

The photo is in the same folder as index.html and style.css. The css is below:

.wallpaper {
    background-image:url('jobbatical-1-wallpaper.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    height: 100%;
}

.navbar {
    overflow: hidden;
    background-color: green;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.navbar a {
    float: left;
    display: block;
    color: blue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

or replace the spaces with %20 also make sure you have set a height of 100% for html and body as it doesn't look like your div has any height — Pete, Jan 04 '18 at 12:19
The img is in the same folder as index.html. I've changed the name already, but it still doesn't work. — jenlky, Jan 04 '18 at 12:19
Then problem is your html/css, wallpaper is set to height:100%...of what? — sinisake, Jan 04 '18 at 12:20
what is with the amount of downvotes lol... okay I'm reading up on Holy grail layout — jenlky, Jan 04 '18 at 12:28
Well, downvoters are always ready, lol....however, easy fix would be to set 100% height to parent element, which is body, in this case... — sinisake, Jan 04 '18 at 12:29

score 1 · Accepted Answer · 2018-01-04T13:05:46.097

The problem is that 100% height is useless if the parent has no height.

What do height do you want the image to have? 100% of the viewport or just fill the page?

(100% of the viewport would mean that you have to scroll to see the full picture because of your navbar)

Here is the code of the image should copy the height of the viewport: (EDIT: maybe you should set the height of the image to 100vh instead of bodys height)

html,
body
{
  height: 100%;
  margin: 0px;
}

.navbar
{
  background-color:green;
  height:50px;
}
.image
{
  height: 100%;
  background-image: linear-gradient(black,gray);
}

  <div class="navbar"></div>
  <div class="image"></div>

Here is the code if you want to fill the parent (using flex):

body
{
  margin: 0px;
}
.viewport
{
  height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.navbar
{
  background-color: green;
  height: 50px;
}
.image
{
  background-image: linear-gradient(black,gray);
  flex-grow: 1;/*This will make the image to fill the parents space*/
}

<div class="viewport">
  <div class="navbar"></div>
  <div class="image"></div>
</div>

Quentin · Answer 2 · 2018-01-04T12:25:44.427

Your div has no height. You can tell because you can see the position of the paragraph under it.

Since it has no height, there are no pixels to display the background image on.

You need to give it a height.

You have tried giving it height: 100% but a percentage height means height: auto (i.e. the height of the content, of which you have none) when the parent element's height is auto (which the body element is by default).

If you want to make a div take up the remaining vertical space after other elements have been accounted for, look at flexbox for layout. The Holy Grail layout is a fairly extreme example of that.

score -1 · Answer 3 · answered Jan 04 '18 at 12:18

-1

Space characters aren't allowed in url's. So you either don't use spaces or encode it when calling it with %20 instead of the space. I personally use - or _ instead.

Stackoverflow: "href syntax : is it okay to have space in file name"

answered Jan 04 '18 at 12:18

JeroenM

807
1
11
26

1

The browser clearly doesn't have any problems with the URL because it is rendering the preview image in the developer tools in the screenshot. – Quentin Jan 04 '18 at 12:23

Background image not working although path is correct

3 Answers3