I am pulling in an image and setting it as a background image. I am trying to make it responsive using cover but setting no height to the div element hides the image, but setting a height stops the responsive effect on smaller browser sizes. How can I get over this?

 

If its any help I am using Bootstrap if there are any other alternative methods.

<div class="header-background-image" style='background-image: url(<?php header_image(); ?>)'></div>

.header-background-image {
	background: no-repeat center;
	background-size: cover!important;
	-moz-background-size: cover!important;
	-webkit-background-size: cover!important;
}

You could use a percentage padding on the header.

.header-background-image {
        padding-bottom:10%;
	background: no-repeat center;
	background-size: cover!important;
	-moz-background-size: cover!important;
	-webkit-background-size: cover!important;
}

Just changing the % to something that suits you.

 

Alternatively you could put a transparent PNG the size you want it within the header with a width of 100%. This will make it responsive and not collapse.

That worked, thanks