loading...

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 WarnaHexadecimalRGB
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.

ValueKeterangan
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 valuetop 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!


0 Comments

Leave a comment