Css background-image not showing up at all

Question

I am trying to give a div class the background image of a header but it won't show up.

Please see:

http://jsfiddle.net/eqzro6s3/

[css]

  .header
  {
      background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
      width: 100%;
  }

[html]

<div class="header">
</div>

What am i doing wrong? Thanks in advance.

Answer 1

background-image is just not a short-hand property, thus you cannot use more than one value:

.header
  {
      background-image: url('path.png');/* remove no-repeat from here*/
      background-repeat: no-repeat; /*use no-repeat here*/
      width: 100%;
  }

Or, use it like this:

.header
  {
      /*short-hand method  can have multiple values*/
      background: url('path.png') no-repeat; 
      width: 100%;
  }

Answer 2

Elements with backgrounds need to have dimensions. They don't automatically size themselves to the background image.

.header
  {
      background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
      width: 100%;
      height: ?????
  }

Answer 3

Try this:

  .header
  {
      background: #FFFFFF url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') left center no-repeat; 
      width:100%; 
      height:431px;

}

http://jsfiddle.net/csdtesting/eqzro6s3/1/

Answer 4

Js Fiddle

 .header{
      background: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
      width: 100%;
      height:432px;
      }

change background-image: to background: