mardi 21 avril 2015

CSS attribute 'contain' not working

I want to be able to display the entirety of an image within a div.

I'm having difficulty displaying an image with the background-size property set to contain - it does not display the whole image, only the centre, at the full size of the source image.

JSFiddle

Code

    #header {
      background: rgba(0, 0, 0, 0.8);
      color: #ccc;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 3;
      padding: 20px 0;
    }
    #header .logo {
      width: calc(100%/3);
      height: 75px;
      margin: 0 auto;
      background-size: contain;
      background: url(http://ift.tt/1GeqLVU) no-repeat center center;
    }
<div id="header">
  <div class="logo"></div>
</div>

Aucun commentaire:

Enregistrer un commentaire