CSS Dasar: Background
CSS yang digunakan utuk memberikan dan mengatur background pada elemen-elemen yang ada di HTML. Properti background pada CSS ada empat yaitu backgroud-color, backgroud-image, background-position, dan backgrund-repeat. Untuk mengetahui fungsi dari masing-masing properti tersebut beserta value yang bisa digunakan langsung saja kita praktekkan.
Pertama persiapkan folder project (nama terserah) berisikan dua file untuk CSS dan HTML. Selain file, tambahkan juga satu folder gambar (img) yang berisikan file gambar background (png), icon (png) dan dua file gradient (x dan y). Script HTML yang telah tersambug secara eksternal dengan file CSS sebagai berikut.
<!DOCTYPE html> <html> <head> <title>CSS Dasar</title> <link rel="stylesheet" href="background-style.css"> </head> <body> <h1>Hello Dulur!</h1> </body> </html>
Background-color
Properti ini berfugsi untuk mengatur warna pada background. Kita bisa menggunakan salah satu dari value: nama warna, hexadecimal, dan RGB. Misal kita akan ambil dari warna berikut.
| Nama Warna | Hexadecimal | RGB |
| Red | #FF0000 | RGB (255, 0, 0) |
| Forest Green | #228B22 | RGB (34, 139, 35) |
| Light Blue | #ADD8E6 | RGB (173, 216, 230) |
body {
/*background-color: forestgreen;*/
/*background-color: #FF0000;*/
background-color: rgb(173, 216, 230);
}
Background-image
Properti ini berfugsi untuk mengatur gambar yang akan digunakan pada background. Properti background-image hanya memiliki satu value untuk memanggil gambar yang akan ditampilkan yaitu url(). Pastikan kita tahu dimana letak gambar yang disimpan dan ingin dipanggil.
body {
background-color: lightblue;
/*akan tampil dan diulang selaras sumbu x dan y*/
background-image: url(img/bg.png);
}
Background-repeat
Properti ini berfugsi untuk mengatur jenis pengulangan gambar pada background. Ada empat value yang bisa kita pakai untuk mengulang sebuah gambar untuk background. Dari empat value berikut bisa kita coba satu persatu.
| Value | Keterangan |
| repeat | Backgroud diulang selaras sumbu x dan y |
| repeat-x | Background diulang hanya pada sumbu x |
| repeat-y | Background diulang hanya pada sumbu y |
| no-repeat | Background tidak diulang |
body {
background-color: white;
/*background-image: url(img/bg.png);*/
/*background-image: url(img/gradient-x.jpg);
background-repeat: repeat-x;*/
/*background-image: url(img/gradient-y.jpg);
background-repeat: repeat-y;*/
background-image: url(img/icon.png);
background-repeat: no-repeat;
}
Background-position
Properti ini berfugsi untuk mengatur posisi gambar pada background. Posisi pada background dikelompokkan berdasarkan sumbu x dan y. Untuk value x(left/center/right) dan value y(top/center/bottom). Kombinasi dari sumbu x dan y pada background akan menghasilkan value: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, dan x-pos y-pos.
body {
background-color: white;
/*background-image: url(img/bg.png);*/
/*background-image: url(img/gradient-x.jpg);
background-repeat: repeat-x;*/
/*background-image: url(img/gradient-y.jpg);
background-repeat: repeat-y;*/
background-image: url(img/icon.png);
background-repeat: no-repeat;
background-position: top right;
}
Terakhir agar lebih ringkas penulisan CSS Background tersebut, bisa kita menggunakan shorthand (singkatan) dengan menulis secara berurutan (background: color url() position repeat;). Hasil penulisan singkatan dengan menyesuaikan kodingan kita:
body {
background: lightblue url(img/icon.png) top right no-repeat;
}
Baiklah cukup materi CSS kali ini, mari terus belajar dan jangan takut untuk selalu mencoba. Sampai jumpa di materi CSS Dasar selanjutya. Tetap yakin pada potensi diri dan semangat berkarya sahabat!
9 Comments