Membuat Lebar Background Full dengan CSS
Hallo teman-teman, kali ini kita akan belajar bagaimana cara membuat lebar background full dengan CSS. Teman-teman nantinya akan dapat membangun sebuah tampilan situs dengan background image yang diperbesar selebar browsernya. Bagi membangun format seperti itu teman-teman dapat menggunakan manfaat background-size. Fungsinya background-size ini yakni membangun background khususnya image menjadi lebar sebesar layar browser teman-teman. Seketika saja di contohnya, kalian dapat 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 di 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 tak selebar itu. Hal tersebut karena adanya manfaat background-size yang diberikan nilai cover.
Demikianlah pembahasan mengenai cara membuat lebar background full dengan CSS. Semoga bermanfaat.
Sumber https://kursuswebsite.org
