Hallo teman-teman, kali ini kita akan belajar bagaimana cara membuat lebar background full dengan CSS. Teman-teman nantinya akan bisa membuat sebuah tampilan website dengan background image yang diperbesar selebar browsernya. Untuk membuat bentuk seperti itu teman-teman bisa menggunakan fungsi background-size. Fungsinya background-size ini adalah membuat background khususnya image menjadi lebar sebesar layar browser teman-teman. Langsung saja pada contohnya, kalian bisa ikuti code dibawah ini.
size.html
<html>
<head>
<title>Background Size</title>
<style>
body{
background: url("crab.jpg");
background-size: cover
}
.container{
width: 800px;
margin: auto;
}
.content{
background: white;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>Hallo teman-teman</h1>
</div>
</div>
</body>
</html>
Lalu pada contoh kali ini kita akan mencoba memberikan background gambar yang akan kita full kan lebarnya. Sehingga akan seperti ini hasilnya.
Gambarnya akan memenuhi lebar browser, padahal gambar aslinya tidak selebar itu. Hal tersebut karena adanya fungsi background-size yang diberikan nilai cover.
Sekian pembahasan mengenai cara membuat lebar background full dengan CSS. Semoga bermanfaat.