CSS Dasar Part 6 - Cara Menggunakan Background Styling Pada CSS
CSS Dasar Part 6 - Cara Menggunakan Background Styling Pada CSS - Salah satu property yang ada pada CSS adalah untuk memberikan style pada background. Background yang dimaksud tidak sebatas hanya pada background yang dimilki body saja, namun termasuk elemen-elemen spesifik lain yang ada pada halaman HTML yang kita buat. Untuk property bacground CSS memiliki 4 property yang bisa kita gunakan semua atau beberapa saja tergantung dari kebutuhan dan selera, yaitu sebagai berikut :
 |
| Background Styling Pada CSS |
1. background-color
fungsi dari property ini untuk memberikan warna pada background. Untuk property background-color kita bisa memberikan value berupa warna berupa nama warna, bilangan hexadecimal, atau campuran dari warna rgb, sama seperti pemberian style color pada text dalam artikel saya yang berjudul Text Styling Pada CSS dan artikel saya yang membahas Cara Menentukan Warna Pada CSS.
Dalam contoh berikut, saya akan memberikan background untuk body, namun saya ulangi lagi, karena pemberian style pada property background ini tidak sebatas hanya untuk background body saja, namun pada elemen-elemen HTM lainnya kita bisa lakukan.
HTML yang akan diberi style :
code><!DOCTYPE html>
<html>
<head>
<title>Background Styling</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
 |
| Background Color |
2. background-image
fungsi dari property ini untuk menambahkan atau mengatur gambar yang digunakan untuk dijadikan background. Selain warna, seperti yang saya jelaskan di atas, kita juga bisa memberikan background dengan sebuah object gambar.
Value/nilai dari property background-image adalah url(). Dimana isi dari url-nya adalah gambar yang akan kita pakai untuk background. Penulisannya berlaku relative url yang penah saya jelaskan di artikel saya yang berjudul Tag Image pada HTML. Untuk penulisannya bisa lihat sintak dibawah ini :
code>background-image: url(img/leaves-pattern.png);
Untuk property background-image, gambar untuk ukuran berapa pun, secara default akan diulang terhadap sumbu vertikal ( x ) dan sumbu horizontal ( y ), seperti contoh dibawah ini, saya menggunakan gambar ukuran 200px X 200 px, namun hasilnya bisa memenuhi seluruh body.
 |
| Background Image |
3. background-repeat
fungsi dari property background ini untuk mengatur jenis pengulangan gambar pada background. Secara default gambar yang tidak diatur posisi-nya, maka gambar sekecil apapun, hasilnya akan memenuhi seluruh background dari elemen yang diberi style property background-image hasil dari pengulangan baik terhadap sumbu X dan sumbu Y. Karena itu, apabila kita tidak ingin gambar tersebut memenuhi seluruh satu elemen yang kita beri style atau kita hanya ingin mengulang satu sumbu saja, kita bisa menggunakan property background-repeat yang bisa mengatur pengulangan gambar baik terhadapa sumbu horizontal ( X ) atau sumbu vertikal ( Y ) saja. Value dari property ini ada 3 :
- repeat : value/nilai dari property ini adalah melakukan pengulangan baik terhadap sumbu x dan sumbu y. Nilai/value ini adalah default dari property background-repeat.
- repeat-x : value/nilai dari property ini melakukan pengulangannya hanya terhadap sumbu x saja.
 |
| Background Repeat-X |
- repeat-y : value/nilai dari property ini melakukan pengulangannya hanya terhadap sumbu y saja.
 |
| Background Repeat-Y |
- no-repeat : value/nilai dari property ini tidak melakukan pengulangan baik terhadap sumbu x atau sumbu y.
 |
| Background No-Repeat |
Kalo kita menggunakan property background-repeat dengan value no-repeat, maka kita punya akses untuk menggunakan property background-position. Karena secara default nilai dari background-position apabila gambarnya tidak diatur, maka letaknya berada di top-left.
4. background-position
fungsi dari property ini untuk mengatur posisi gambar baik secara sumbu horizontal ataupun vertikal. Untuk value/nilai dari property ini 2 yaitu :
1. sumbu X atau Horizontal : left/center/right
2. sumbu Y atau Vertikal : top/center/bottom
untuk value tersebut bisa kita kombinasikan nilainya sebagai berikut :
- top left
- top right
- top center
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
- x% y%
- x-pos y-pos
untuk contohnya sebagai berikut :
 |
| Background Position Top-Right |
 |
| Background Position Center-Center |
Shorthand/Singkatan dari CSS property Background
Sebelumnya di artikel saya yang berjudul Font Styling Pada CSS, saya pernah membahas bahwa untuk penulisan sintak CSS property font bisa disingkat. Begitu juga dengan property background, sama seperti font, untuk nilai dari property ini bisa disingkat juga. namun untuk property background, penempatan penulisan nilainya tidak harus mengikuti standar urutan seperti property font. untuk penulisannya sebagai berikut :
 |
| Shorthand Background Styling |
 |
| Contoh Penggunaan Shorthand Background Styling |
Sekian dulu pembahasan mengenai bagaimana cara menggunakan property background pada CSS. Semoga penjelasan ini bisa dimengerti buat teman-teman. Terutama bagi teman-teman yang baru belajar CSS. Apabila ada pertanyaan, saran dan kritik, silakan tulis dikolom komentar. Tetap semangat. See you on my next articles. Bye-bye...
Referensi:
https://www.w3schools.com
https://www.w3schools.com/css
http://www.w3.org/style/CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
http://css-tricks.com/almanac
- kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
- the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.
Post a Comment for "CSS Dasar Part 6 - Cara Menggunakan Background Styling Pada CSS"
Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan