background-size: contain height always 0 - html

Question

I'm trying to make an image responsive, using contain for the background-size, but the height is always 0. I've set the height on the parent element, what am I missing?
.masthead .container {
height: 300px;
}
.masthead-title {
margin-top: 0;
margin-bottom: 0;
color: #505050;
background-image: url('../logo.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
<div class="masthead">
<div class="container">
<label for="sidebar-checkbox" class="sidebar-toggle"></label>
<h3 class="masthead-title">
</h3>
</div>
</div>

Answer 1

You need to specify a height for your .masthead-title.
.masthead .container {
height: 300px;
border: 1px dashed gray; /* for demo only */
}
.masthead-title {
margin-top: 0;
margin-bottom: 0;
color: #505050;
background-image: url('http://i.imgur.com/60PVLis.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
height: 100%; /* new */
}
<div class="masthead">
<div class="container">
<label for="sidebar-checkbox" class="sidebar-toggle"></label>
<h3 class="masthead-title">
</h3>
</div>
</div>
jsFiddle

Answer 2

The problem is that the <h3> tag you're using for the background-image has zero as height. So either give the .masthead-title a fixed height or do some content into the <h3> or the <a> within.
Option 1: fixed height on element which has property background-image
.masthead-title {
height: 300px;
}
Option 2: content inside the element which has the background-image property
<h3 class="masthead-title">
Test Test Test
</h3>
Option 3:
keep the fixed height on the container and set the child container with the background-image property to 100% height
.masthead .container {
height:300px;
}
.masthead-title {
height:100%;
}