background-image is not responding on the header

1
votes

I have tried everything but the background image of the header is not showing up in browsers

in request headers I'm getting this Provisional headers are shown User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2825.0 Safari/537.36

//Parallax
 .bird-box {
  position: relative;
  height: 600px;
  background-image: url(../images/bird-bg.jpg);
  background-size: contain;
  background-position: top center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>BlackBird Co.</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-      scale=1">
  <link rel="icon" type="image/png" href="images/favicon.png">
</head>

<body>
  <link rel="stylesheet" href="css/style.css">
  <header class="bird-box">
    <div class="back-bird"></div>
    <div class="logo"></div>
    <div class="fore-bird"></div>
  </header>

</body>

</html>
2
htmlcssdom
can you share an working fiddle or code snippet? And you added style.css inside <body> tag, it should be in <head> tag - Deepak Yadav
Welcome to StackOverflow! Please provide a Minimal, Complete, and Verifiable example of your attempt (as a Stack Snippet e.g.), so we can try to solve your problem and explain why your own attempt failed - that way you can learn something useful for your future development, as well as getting an answer to this single problem. - andreas
do you have a url ? - ac.caron
it could be .JPG instead of .jpg -> i have sometimes the same problem ;) - Stefan Stefko
yeah I have the right path to the image @ac.freelancer - Ineza

2 Answers

2
votes

CSS comment syntax is /* comment here */. It does not support line comments.

This:

//Parallax .bird-box

… is an invalid selector that doesn't match your element.

Change the comment to be valid CSS.

0
votes

You used the wrong CSS comment syntax! Correct would be /* comment */. Unfortunately, there are no one line comments in CSS. You can read more about it at MDN.

/* Parallax */
 .bird-box {
  position: relative;
  height: 600px;
  background-image: url(https://unsplash.it/600/300);
  background-size: contain;
  background-position: top center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>BlackBird Co.</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-      scale=1">
  <link rel="icon" type="image/png" href="images/favicon.png">
</head>

<body>
  <link rel="stylesheet" href="css/style.css">
  <header class="bird-box">
    <div class="back-bird"></div>
    <div class="logo"></div>
    <div class="fore-bird"></div>
  </header>

</body>

</html>