CSS Background
CSS Background, pada background sendiri terbagi menjadi dua yaitu background image dan background color. Kita akan membahasnya satu persatu pada materi ini. Pada umumnya background image dan background color di gunakan sesuai kebutuhan websitenya. Jika website yang temanya untuk bisnis atau semacamnya, biasanya menggunakan background image dan untuk backround color biasanya untuk website biasa dan juga untuk element-element lainnya yang ada pada website. Keduanya flexsibel tergantung kita yang menentukannya.
background-color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Background</title>
</head>
<style type="text/css">
.p-1{
background-color:#1aff66 ;
opacity: 1;
}
.p-2{
background-color:#1aff66 ;
opacity: 0.7;
}
.p-3{
background-color:#1aff66 ;
opacity: 0.4;
}
</style>
<body>
<p class="p-1">Ini background color dengan opacity 1</p>
<p class="p-2">Ini background color dengan opacity 0.7</p>
<p class="p-3">Ini background color dengan opacity 0.4</p>
</body>
</html>
Menambahkan background color sangatlah mudah. Hanya menambahkan property background-color: ; dan masukan warnanya. Dan fungsi property opacity yaitu untuk mengatur tingkat transparan. semakin kecil nilai yang kita masukan maka akan semakin transparan.
Kode diatas merupakan kode yang digunakan untuk mengubah warna latar belakang pada element saja. Nah, bagaimana untuk membuat latar belakang sebuah website pada html? Lihat kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="#546bd6">
<p>Website ini memiliki warna latar belakang #546bd6.</p>
</body>
</html>
Namun, untuk mengubah latar belakang website menjadi ada gambarnya, kalian bisa menggunakan cara kode CSS.
background-image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Background</title>
</head>
<style type="text/css">
.background{
background-image: url(img-anime.png);
width: 130px;
height: 130px;
background-position: center;
background-repeat: no-repeat;
}
</style>
<body>
<div class="background"></div>
</body>
</html>
Property background image terdiri dari
background-position = menentukan posisi background
background-repeat = memiliki fungsi untuk mengatur background ketika ukuran gambar sudah max maka apa akan mengulang atau tidak untuk memenuhi ukuran selector
background-image = Untuk memasukkan image atau gambar kita menambahkan value url(namafile.tipe file). Contohnya seperti url(image-anime.jpg) perlu di ingat, jenis atau tipe gambarnya jangan sampai salah yah.
Kalian bisa mencari referensi lain jika merasa kurang. Terimakasih