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 berdasarkan property ini untuk memberikan warna dalam background. Untuk property background-color kita mampu memberikan value berupa warna berupa nama rona, bilangan hexadecimal, atau adonan berdasarkan rona rgb, sama seperti anugerah style color dalam text pada artikel aku yg berjudul Text Styling Pada CSS dan artikel aku yg membahas Cara Menentukan Warna Pada CSS.
Dalam contoh berikut, saya akan menaruh background untuk body, tetapi saya ulangi lagi, karena anugerah style dalam property background ini nir sebatas hanya buat background body saja, namun pada elemen-elemen HTM lainnya kita mampu lakukan.
HTML yg 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 |
dua. Background-image
fungsi menurut property ini buat menambahkan atau mengatur gambar yang dipakai buat dijadikan background. Selain warna, misalnya yg saya jelaskan di atas, kita pula bisa memberikan background dengan sebuah object gambar.
Value/nilai berdasarkan property background-image merupakan url(). Dimana isi berdasarkan url-nya adalah gambar yg akan kita pakai buat background. Penulisannya berlaku relative url yang penah saya jelaskan pada artikel aku yg 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 buat ukuran berapa pun, secara default akan diulang terhadap sumbu vertikal ( x ) & sumbu horizontal ( y ), misalnya contoh dibawah ini, saya memakai gambar ukuran 200px X 200 px, tetapi hasilnya sanggup memenuhi seluruh body.
 |
| Background Image |
3. Background-repeat
fungsi berdasarkan property background ini buat mengatur jenis pengulangan gambar pada background. Secara default gambar yang tidak diatur posisi-nya, maka gambar sekecil apapun, hasilnya akan memenuhi semua background menurut elemen yg diberi style property background-image hasil berdasarkan pengulangan baik terhadap sumbu X dan sumbu Y. Lantaran itu, jika kita tidak ingin gambar tersebut memenuhi semua satu elemen yg kita beri style atau kita hanya ingin mengulang satu sumbu saja, kita bisa menggunakan property background-repeat yg bisa mengatur pengulangan gambar baik terhadapa sumbu horizontal ( X ) atau sumbu vertikal ( Y ) saja. Value dari property ini ada tiga :
- 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 berdasarkan 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 memakai property background-repeat dengan value no-repeat, maka kita punya akses buat memakai property background-position. Karena secara default nilai berdasarkan background-position apabila gambarnya nir diatur, maka letaknya berada di top-left.
4. Background-position
fungsi dari property ini buat mengatur posisi gambar baik secara sumbu horizontal ataupun vertikal. Untuk value/nilai berdasarkan property ini 2 yaitu :
1. Sumbu X atau Horizontal : left/center/right
dua. Sumbu Y atau Vertikal : top/center/bottom
buat value tersebut mampu kita kombinasikan nilainya menjadi 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
buat misalnya menjadi berikut :
 |
| Background Position Top-Right |
 |
| Background Position Center-Center |
Shorthand/Singkatan menurut CSS property Background
Sebelumnya pada artikel aku yg berjudul Font Styling Pada CSS, aku pernah membahas bahwa buat penulisan sintak CSS property font mampu disingkat. Begitu juga menggunakan property background, sama seperti font, buat nilai menurut property ini bisa disingkat pula. Tetapi buat property background, penempatan penulisan nilainya nir harus mengikuti baku urutan seperti property font. Buat penulisannya sebagai berikut :
 |
| Shorthand Background Styling |
 |
| Contoh Penggunaan Shorthand Background Styling |
Sekian dulu pembahasan tentang bagaimana cara memakai property background dalam CSS. Semoga penerangan ini sanggup dimengerti buat sahabat-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://developer.Mozilla.Org/en-US/docs/Web/CSS/Reference
- 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.
Belum ada Komentar untuk "CSS Dasar Part 6 - Cara Menggunakan Background Styling Pada CSS"
Posting Komentar