Cacher is the code snippet organizer for pro developers

Just a static image? Or a pattern? A slider maybe? <br>
Or even a background video? It´s your choice!
<a class="button" href="http://sg-demo.com/amare-basic/feature-top/" title="Whatever" style="font-size: 20px; margin:25px 0 0 0;">Read more</a>

[vidbg container="#ez-feature-top-container-wrap" mp4="...full url to your mp4 video...." webm="...full url to your webm video...." poster="...full url to your replacement picture...." loop="true" overlay="false" muted="false"]

<h4 style="font-size:30px; font-size:3rem; text-align:center;">
<i class="fa fa-file-image-o fa-3x" aria-hidden="true" style="display:block; margin:0 0 20px 0;"></i>
Image</h4>
<p style="font-size:20px; font-size:2rem;text-align:center;">A picture is worth a thousand words and that´s all you need?<br>
<a class="button" href="http://sg-demo.com/amare-basic/feature-top/image-hero/" title="Image hero demo" style="font-size: 20px; margin:25px 0 0 0;">Image demo</a></p>

jQuery(function( $ ){
// Does NOT account for secondary nav, goes best with only header right nav

	// Function to automatically set the height of #ez-feature-top-container-wrap to viewport height.
	function after_header_height() {

		// Account for WordPress admin bar height, if present
		var barHeight = $('#wpadminbar').outerHeight();

		// Viewport height
		var windowHeight = window.innerHeight;

		// Viewport height minus WordPress admin bar height is new height of Feature Top
		var newHeight = windowHeight - barHeight;

		$( '#ez-feature-top-container-wrap' ).css({'height': newHeight + 'px'});
	}

	// http://stackoverflow.com/a/1974797/778809
	// Bind to the resize event of the window object
	$(window).on("resize", function () {
		after_header_height();
		// Invoke the resize event immediately
	}).resize();

});

/* Quick way to have one section look like a full-width-row with different bg color - EZ Middle sample */
.home .site-inner {
	overflow:visible;
}
#ez-home-middle-container, #ez-home-middle-container .ez-home-wrap {
    clear: both;
    display: block;
}
#ez-home-middle-container {
  margin: 50px -10000px;
	padding: 50px 10000px;
	background: #E8E8E8;
}

<p style="margin-bottom:15px;"><i class="fa fa-map-marker" aria-hidden="true" style="width:28px; color:#C31B42; display:inline-block;"></i>123 Somewhere in Austria</p>
<p style="margin-bottom:15px;"><i class="fa fa-phone" aria-hidden="true" style="width:28px; color:#C31B42; display:inline-block;"></i>(123) 456 789</p>
<p style="margin-bottom:15px;"><i class="fa fa-clock-o" aria-hidden="true" style="width:28px; color:#C31B42; display:inline-block;"></i>Working Hours: 9.00 AM - 6.00 PM</p>
<p style="margin-bottom:15px;"><i class="fa fa-envelope" aria-hidden="true" style="width:28px; color:#C31B42; display:inline-block;"></i><a>hellothere@xxx.com</a></p>

a.button{
    background: #C31B42;		
    color: #FFFFFF !important;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    margin: 10px 0;
    padding: 10px 20px;
    border:1px solid #911D00;
    border-radius: 5px;
    text-decoration:none;
	box-shadow: inset 0 0 3px 0 rgba(255, 255, 255, 0.8);
}

a.button:hover {
  background: #FA3953!important; 
  color: #ffffff!important;
}