Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana cara buat background responsive css bahkan saat resize browser,
berikut ini syntaxnya.
<!DOCTYPE html>
<html>
<head>
<title>Extreme responsive background</title>
<style>
.overlay{position:absolute;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,0.25);z-index:3}
.background{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff url(https://images.unsplash.com/photo-1506765336936-bb05e7e06295?ixlib=rb-0.3.5&s=d40582dbbbb66c7e0812854374194c2e&auto=format&fit=crop&w=750&q=80) center 65% no-repeat;background-size:cover}
header.wrap{height:-webkit-calc(80vh);height:-moz-calc(80vh);height:calc(80vh);min-height:320px;position:relative;z-index:10}
.header_section{height:100%;margin:0 0 60px;display:table;width:100%;height:100%;text-align:center}
.header_section__copy{margin:0 auto;padding:0 40px;display:table-cell;vertical-align:middle}
</style>
<body>
<div class="overlay"></div>
<div class="background"></div>
<header class="wrap">
<div class="header_section">
<div class="header_section__copy">
</div>
</div>
</header>
</body>
</html>
Semoga bermanfaat.
http://pangeran-it.blogspot.com/
