Inner Banner

About Us

PHP

<?php
	$conf = array(
		'top_image' => '/img/banner.jpg',
		'mas' => '5:3'
	);

	$page_title = '<h1>About Us</h1>';
	$banner_img = $conf['top_image'];
	// if ($page['background'] != '') $banner_img = '/pictures/sections/'.$page['background'];
?>
						
<?php if(isset($page_title) && !empty($page_title)):?>
<div class="inner_banner" style="background-image: url('/imagephp/width=1920&mas=<?=$conf['mas']?>&image=<?=$banner_img?>')">
	<div class="wrapper">
		<div class="inner_banner_wrap">
			<?= $page_title ?>
		</div>
	</div>
</div>
<?php endif;?>

CSS

.inner_banner{background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:center top;position:relative;z-index:2}
.inner_banner::after{content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-color:rgba(0,0,0,0.47);z-index:-1}
.inner_banner .inner_banner_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;height:24rem;padding:3rem 0}
.inner_banner h1,.inner_banner .h1{font-size:4rem;font-weight:700;line-height:1.2;color:#fff;margin:0}
.inner_banner .inner_banner_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;height:24rem;padding:3rem 0}

@media only screen and (max-width: 1300px) {
	.inner_banner .inner_banner_wrap{height:20rem}
}

@media only screen and (max-width: 992px) {
	.inner_banner .inner_banner_wrap{height:16rem;padding:2rem 0}
	.inner_banner h1,.inner_banner .h1{font-size:3.4rem}
}

@media only screen and (max-width: 767px) {
	.inner_banner .inner_banner_wrap{height:14rem}
	.inner_banner h1,.inner_banner .h1{font-size:3rem}
}

SCSS

/* Vars */
$cb:        #000000;
$white:     #ffffff;

.inner_banner {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	position: relative;
	z-index: 2;
	
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba($cb, 0.47);
		z-index: -1;
	}
	
	.inner_banner_wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 24rem;
		padding: 3rem 0;
	}
	
	h1, .h1 {
		font-size: 4rem;
		font-weight: 700;
		line-height: 1.2;
		color: $white;
		margin: 0
	}
}

.inner_banner .inner_banner_wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 24rem;
	padding: 3rem 0;
}

@media only screen and (max-width: 1300px) {
	.inner_banner .inner_banner_wrap {height: 20rem}
}

@media only screen and (max-width: 992px) {
	.inner_banner .inner_banner_wrap {height: 16rem;padding: 2rem 0;}
	.inner_banner h1, .inner_banner .h1 {font-size: 3.4rem}
}

@media only screen and (max-width: 767px) {
	.inner_banner .inner_banner_wrap {height: 14rem}
	.inner_banner h1, .inner_banner .h1 {font-size: 3rem}
}