0

Nothing shows up when I try to put a background image in a div via CSS. I've tried adding properties like position, width, height. And, I am also able to place the photo via CSS in the <body> tag. But, obviously, I'd like to not have to leave it there. Here's my html:

    <!DOCTYPE html/>
<html>

  <head>

    <link type="text/css" rel="stylesheet" href="main.css"/>

    <title>
      Lovers &amp; Fighters
    </title>
  </head>
  <body>
      <div id="photo">
      </div>
      <nav>
        <ul id="main">
          <li>Menu</li>
          <li>About</li>
          <li>Music</li>
          <li>Videos</li>
          <li>Photos</li>
          <li>Contact</li>
        </ul>
        <ul id="social">
          <li>
            <img/>
          </li>
          <li>
            <img/>
          </li>
        </ul>

    </body>
  </html>

Here's my CSS:

#photo{
    background-image: url('../images/bandbanner.png')
}
Improve this question
2
  • 4
    Have you tried debugging via the console? Is the path to the image correct? Does the #photo div have a height and width? Commented Aug 11, 2014 at 20:12
  • What's the <nav> tag all about? There's no closing </nav> tag. And your photo div is an empty container. Commented Aug 11, 2014 at 20:14

5 Answers 5

Reset to default
1 
<div id="photo">
  </div>

in your dive you haven't set the size. for example:

#photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The div photo contains nothing, try adding 

#photo{
    background-image: url('../images/bandbanner.png');
    width: 100%
    padding : 100px;
    //hopefully this will make the photo appear and you can go from there
}
Improve this answer

Comments

0

Set height & width property of #photo.

See working example: http://jsfiddle.net/ihkawiss/2n0o9t9x/

Improve this answer

Comments

0

The HTML:

<!DOCTYPE html/>
<html>

  <head>

    <link type="text/css" rel="stylesheet" href="main.css"/>

    <title>
      Lovers &amp; Fighters
    </title>
  </head>
  <body>
      <div class="photo">
      <nav>
        <ul id="main">
          <li>Menu</li>
          <li>About</li>
          <li>Music</li>
          <li>Videos</li>
          <li>Photos</li>
          <li>Contact</li>
        </ul>
      </nav>
        <ul id="social">
          <li>
            <img/>
          </li>
          <li>
            <img/>
          </li>
        </ul>
    </div>
    </body>
  </html>

And the CSS:

.photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}
Improve this answer

Comments

0

set your height and width

width: px;
height: px;
Improve this answer

3 Comments

Note that you need actual numbers here; px isn't a valid value for height or width, but a value with a number, like 100px, would be. You can also use percentages (%) or em; read more here.
I had intentionally left the value blank so the OP could tailor it to his needs and correct sizing.
I assumed that's what it was, but wanted to clarify for OP, in case OP doesn't know the syntax.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.