Background img doesn't work css

Question

I saw this web design that I wanted to try making.. I've made the header so far and everything works EXCEPT THE BACKGROUND IMAGE. I have no idea what is wrong with my code .. please tell me what I am doing wrong. I will put the full scss and the html code

the HTML:

<!DOCTYPE html>
<html>
<head>
  <title>ClassyDays</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" type="text/css" href="style/style.css">
  <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>

<body>
<header>
  <h2 id="nav-ico"><i class="fa fa-navicon"></i></h2>
  <div id="warp-h">
  <h1>CLASSY<span class="gray">DAYS</span></h1>
  <h2 class="gray">A classy HTML/Css3 design by <em>my highness</em></h2>
  <button>LEARN MORE</button>
</div>
</header>

<!--intro--><section id="sec1"></section>
<!--features--><section id="sec2"></section>
<!--feat-det--><section id="sec3"></section>
<!--seprate--><section id="sec4"></section>
<!--feat-pic--><section id="sec5"></section>
<!--button-sep--><section id="sec6"></section>
<!--team--><section id="sec7"></section>
<!--login--><section id="sec8"></section>
<!--socail-media--><section id="sec9"></section>
<footer></footer>
</body>
</html>

and this is my css (scss) code

//colors
$black: #353535;
$grey: #a1a9b0;
$darkblue: #242830;
$button: #3dc9b3;
$button-shadow: #309383;

//size
$h1: 2em;
$h2: 1.25em;
$body: 1em;

//font (only one)
$font: 'Lato', sans-serif;


* {

}
body {
  color: $grey;
  font-size: $body;
  text-align: center;
  font-family: $font;
}
.gray {
  color: $grey;
}
h1 {
  color: $black;
  font-size: $h1;
}
h2 {
  color: $black;
  font-size: $h2;

}
header {
  display:block;
  background: url(img/header.png);
  width: 100%;
  overflow: auto;
  #nav-ico {
    float: right;
    padding: .5 * $body 7 * $body;
    :hover {
      color: $grey;
    }
  }
  #warp-h {
    margin: auto;
    padding: 4 * $h1;
  }
  button {
    font-family: $font;
    font-size: $body;
    padding: .5 * $body $body;
    margin: 2 * $body;
    border: none;
    border-radius: .5 * $body;
    background: $button;
    border-bottom: 4px solid $button-shadow;
    text-align: center;
    text-decoration: none;
    color: white;
    width: 10.25em;
    height: 3.5em;
  }
}

I know I am not making any css link mistake because it basically works on everything ( the color, size, padding and such ) nor do I believe the problem is with the picture or its link, because I have changed its place and the picture itself( I put an image that I used previously in a project ) but nothing work I have tried to copy-paste that line many times from the internet just in case I have a spelling mistake but then again I didn't misspell

EDIT: THANK YOU! to anyone interested, basically I forgot to make the link RELATIVE to the css file and not the website itself

Did you try to check the full url of image in browser source viewer? Try to add slash before to make path absolute instead of relative. — ElChupacabra, Oct 10 '17 at 17:58
Assuming everything is as you've said it is, then it's because `img/header.png` is not correct. Keep in mind the path needs to be relative to the CSS file. — Adam Jenkins, Oct 10 '17 at 17:58

score 1 · Accepted Answer · answered Oct 10 '17 at 17:58

1

I suspect your background image is not relative to the CSS file...

background: url(/img/header.png);

This should work if your image is found at your-site.com/img/header.png

answered Oct 10 '17 at 17:58

Fenton

241,084
71
387
401

Background img doesn't work css

1 Answers1