Tutorial CSS Untuk Pemula - Belajar Menggunakan Property Background Pada CSS
Pada tutorial sebelumnya kita telah belajar tentang property color pada CSS dan juga nilai apa saja yang bisa digunakan padanya.
Dan pada kesempatan kali ini kita akan belajar tentang property background pada CSS dan cara menggunakannya.
Secara umum, property background pada CSS berfungsi untuk memberi dan mengatur tampilan latarbelakang atau background pada sebuah Tag atau Element HTML.
Jika anda memperhatikan dengan baik kode yang saya tulis pada tutorial-tutorial sebelumnya, disitu saya sangat sering menggunakan property background-color yang mana properti background-color ini merupakan salah satu dari beberapa macam properti background yang terdapat pada kode CSS.
Di dalam CSS terdapat beberapa macam properti background yang bisa kita gunakan untuk membuat, mengatur dan memodifikasi background halaman sebuah website. Diantara property background tersebut adalah background-color, background-image, background-repeat, background-position dan background attachment.
Masing-masing property tersebut memiliki nilai yang berbeda-beda dan kita akan membahas property-property tersebut satu persatu beserta nilainya.
Sebelum kita mulai, jangan lupa untuk mempersiapkan dan memastikan teks editor dan browser anda bisa berfungsi dengan baik, kemudian buatlah sebuah folder baru didesktop anda dengan nama belajar_property_background_css untuk menyimpan file yang kita buat nanti, in sya aLLAH.
Tanpa berlama-lama lagi mari kita langsung mulai saja pembahasannya.
Mengenal Beberapa Macam Property Background dan Nilai Yang Bisa Digunakan Padanya
Background-color
Property background-color berfungsi untuk memberikan warna latarbelakang atau warna background pada sebuah Tag atau Element HTML.
Secara asal tidak semua Tag atau Element HTML memiliki atribut untuk memberi atau mengganti warna background, akan tetapi dengan property background-color ini kita bisa membuat atau mengganti warna asal background pada Tag atau Element HTML yang mana saja yang kita inginkan.*
Dalam penggunaannya, property background-color ini memiliki beberapa macam nilai yang bisa kita gunakan padanya, diantaranya yaitu :
- Warna : baik berupa Nama Warna ataupun kode-kode warna lainnya yang telah kita bahas pada tutorial sebelumnya. Nilai ini digunakan untuk memberikan warna tertentu pada sebuah Tag atau Elemnt HTML.
contoh penulisan :
background-color: nama_atau_kode_warna;
2. Initial : warna default atau warna asal. Digunakan untuk memberikan atau mengembalikan warna default dari sebuah Tag atau Element HTML.
contoh penulisan :
background-color: initial;
3. Inherit : warna turunan. Digunakan untuk memberikan warna yang sama dengan warna dengan warna Tag atau Element HTML yang memuatnya
background-color: inherit;
4. Tranparent : warna transparan. Digunakan untuk memberikan warna transparan pada sebuah Tag atau Element HTML.
background-color: transparent;
Untuk contoh penerapannya silahkan buka teks editor anda (buat file baru) lalu ketikkan atau copy-paste kode dibawah ini:
<html>
<head>
<title>Belajar Menggunakan Property background-color</title>
</head>
<body>
<style>
body {
background-color: teal;
}
td {
font-size : 30px;
text-align : center;
color : #000000;
font-weight : bold;
}
.merah {
background-color : red;
}
.hijau {
background-color : #00ff00;
}
.biru {
background-color : rgb(0,0,255);
}
.kuning {
background-color : #ffff00;
}
.ungu {
background-color : purple;
}
</style>
</head>
<body>
<table border="0" cellpadding="80px" align="center">
<tr>
<td class="merah"> Merah </td>
<td class="kuning"> kuning </td>
<td class="hijau"> hijau </td>
<td class="biru"> biru </td>
<td class="ungu"> ungu </td>
</tr>
</table>
</body>
</html>
Kemudian simpan dengan nama background_color.html didalam folder belajar_property_background_css lalu jalankan dibrowser anda, maka hasilnya kira-kira seperti ini :
Untuk nilai yang lain anda bisa mencobanya sendiri dengan mengubah nilai warna menjadi nilai yang mana saja yang ingin anda coba dari ketiga nilai diatas atau anda bisa membuat file baru untuk mencobanya.
Background-image
Selain menggunakan background warna, kita juga bisa menggunakan background gambar untuk mempercantik tampilan website kita.
Dalam CSS terdapat property background-image yang berfungsi untuk memberikan tampilan bakcground berupa gambar pada sebuah website.
Sebenarnya untuk dapat mengganti gambar background sebuah website kita bisa menggunakan atribut background pada HTML, akan tetapi dengan menggunakan CSS kita akan lebih leluasa untuk mengatur background gambar tersebut dan bahkan kita bisa memberikan gambar background pada Tag atau Element HTML yang tidak memiliki atribut tersebut.
Ada beberapa macam nilai yang bisa digunakan pada property background-image ini, diantaranya :
- url(nama_atau_letak_gambar) : Nilai ini berfungsi untuk mencari dan menemukan gambar yang akan kita jadikan sebagai background.
contoh penulisan :
background-image: url('nama_atau_letak_gambar');
2. Initial : Nilai ini berfungsi untuk memberikan nilai gambar background secara default.
contoh penulisan :
background-image: initial;
3. Inherit : Nilai ini digunakan untuk memberikan gambar yang sama dengan gambar pada Tag atau Element HTML yang memuatnya.
background-image: inherit;
4. none : Tanpa background. Ini adalah nilai default.
background-image: none;
Untuk mengetahui penggunaan property background-image ini mari kita buat sebuah file HTML baru. Namun sebelumnya silahkan anda klik kanan pada gambar dibawah ini lalu pilih save-as :
Kemudian simpan di folder belajar_background_image_css dengan nama bg.jpg.
Setelah itu silakan buka teks editor Anda lalu ketikkan atau copy paste kode dibawah ini:
<html>
<head>
<title>Belajar Menggunakan Property background-image</title>
<style>
body{
background-image: url('bg.jpg');
color: white;
font-size:35px;
text-align: center;
}
</style>
</head>
<body>
Saya sedang belajar membuat background gambar dengan property backround-image!!!
</body>
</html>
Kemudian Simpan dengan nama background_image.html lalu jalankan di browser anda maka hasilnya kira-kira seperti ini:
Untuk nilai yang lain silahkan anda coba praktekkan sendiri untuk melihat hasilnya, baik dengan mengubah nilai background_image diatas atau dengan membuat sebuah file baru.
Nah, itulah tutorial mengubah tampilan background dengan CSS.
Bagaimana? Sangat mudah untuk dipahami dan dipraktekkan bukan?
Setelah kita mengerti dan telah berhasil mempraktekkan cara membuat background berupa gambar, maka selanjutnya kita akan mempelajari cara mengatur background gambar tersebut dengan beberapa property lain yaitu property background-repeat, background-position dan background-attachment.
Penasaran dengan ketiga property tersebut? langsung saja klik disini untuk membaca tutorialnya
Semoga bermanfaat.