CODEWITHSUNDEEP
htmlcss
user3928243
user3928243

Reputation:

CSS background-image not showing

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')
}

Upvotes: 0

Views: 83

Answers (5)

racecarjonathan
racecarjonathan

Reputation: 1234

set your height and width

width: px;
height: px;

Upvotes: 0

Shifty
Shifty

Reputation: 112

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;
}

Upvotes: 0

vinnie667
vinnie667

Reputation: 109

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
}

Upvotes: 1

ihkawiss
ihkawiss

Reputation: 986

Set height & width property of #photo.

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

Upvotes: 0

gsiradze
gsiradze

Reputation: 4733

<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;
}

Upvotes: 1

Related Questions