Background-image doesn't show up in a div

Question

It doesn't even show up in the Chrome Inspector. I am doing something wrong but don't know what.

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS & Favicon -->
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
  <link rel="stylesheet" href="css/stylesheet.css">
    <!-- scripts -->
</head>
<body>
  <div class="wrapper">
    <header>
      <div id=="container header_div">
        &nbsp;
      </div>
    </header>
  </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

And the CSS is:

body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
    background-image: url(../images/header_background.jpg);
    background-position: center;
    background-size: cover;
}

I have added all of the background-properties in the css and the div has a size.

My file structure is like this:

Try `background-image: url('images/header_background.jpg');`. You also have a typo in `
`. Only one `=` — j08691, Jan 21 '17 at 20:45
Thank you for the comment, but it doesn't work. [link]http://imgur.com/a/pdrbw — Lyubomir, Jan 21 '17 at 20:50
You can't assign multiple ID's to an element. http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids — Michael Coker, Jan 21 '17 at 20:54

Gordana Minovska · Answer 1 · 2017-01-21T21:32:01.937

I see several things that can cause the issue:

There is double equal here: <div id=="container header_div">. Should be single. In addition, I see two words in the id separated by space. ID's cannot be chained like classes, and this is not a valid syntax. Since you style #header_div, the id attribute on the div should be id = "header_div".
The relative path to the image starts with two dots. As a result, you step out of the current directory. Since your images folder is in the same directory as the page.html, the filepath should be: url(/images/header_background.jpg);
To see the image you would need to declare the height in the #header_div element as well.

By doing this, I was able to see a background image in my test. I hope this helps.

score 1 · Accepted Answer · answered Jan 21 '17 at 20:50

Not exist <div id="container header_div"> in you css, change to <div id="header_div">

body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
    background-image: url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
    background-position: center;
    background-size: cover;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS & Favicon -->
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
  <link rel="stylesheet" href="css/stylesheet.css">
    <!-- scripts -->
</head>
<body>
  <div class="wrapper">
    <header>
      <div id="header_div">
        &nbsp;
      </div>
    </header>
  </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Thank you! :) I've managed to show it using your corrections to the HTML and this CSS: `body {width: 100%; height: 100%; position: relative;} header {height: 100vh;} #header_div { background-image: url('../images/header_background.jpg'); background-position: center; background-size: cover; }` — Lyubomir, Jan 21 '17 at 21:03

score 0 · Answer 3 · answered Jan 21 '17 at 20:47

0

I had a similar issue like this before. This is what I did. I set the div background to just this background: url("./images/header_background.jpg");

answered Jan 21 '17 at 20:47

Amidou Kante

19
8

I believe that since it is relative to the location of the css it should be ../images/header_background.jpg in my case but it doesn't work. :( – Lyubomir Jan 21 '17 at 21:00

Background-image doesn't show up in a div

3 Answers3