Macam-Macam Property Background Pada CSS

Kali ini saya akan membahas tentang bagaimana cara membuat beckground pada web maupun blog kalian. Sifat latar belakang CSS digunakan untuk memberikan effect latar belakang sebuah tampilan blog atau web. oke langsung kita mulai pembahasannya.

Macam-Macam Property Background Pada CSS

Latar Belakang Properti CSS Meliputi:

Background-color
Background-image
Background-repeat
Background-attachment
Background-position

Oke Sekarang saya bahas satu persatu pengertian, fungsi dan contoh scriptnya, simak baik-baik ya...


1. Background-color

Properti ini memiliki fungsi yaitu memberika efect warna pada latar belakang web atau blog kalian. warna latar belakang halaman web atau blog dapat kalian liat pada script dibawah ini

Contoh :

body {
background-color: blue;
}

Selain dengan value nama warna, kalian juga dapat menentukan warna dengan 3 cara yaitu :

Menggunakan nama warna yang valid : "merah"

-Tidak semua nama warna dapat anda gunakan pada cara ini, sehingga kelemahan dari cara pertama ini adalah tidak semua warna dapat tercantum


Menggunakan nilai Hexadecimal : "FF0000"

-Jika anda menggunakan Hexadcimal anda dapat memilih warna sepuasnya, tapi ingat anda harus tau code hexadecimalnya, jika anda tidak mengetahui, anda bisa membuka photoshop kalian, dan cari tuh code warna hexadecimal


Menggunakan nilai RGB : "rgb (255,0,0)"

-Tidak semua orang menggunakan warna dengan code ini, sebab perlu angka-angka yang dimasukkan, tetapi cara ketiga ini bisa juga lebih mudah digunakan bila anda mencarinya di photohop (seperti cara yang kedua)


Contoh Pada Teks :

h1 {
background-color: green;
}


p {
background-color: blue;
}


Contoh Pada Kotak atau Tag DIV :

div {
background-color: purple;
}


2. Background-image

Properti ini menentukan latar belakang web atau blog dengan menggunakan gambar (Picture). Gambar latar belakang halaman web atau blog dapat kalian liat pada script dibawah ini :


Contoh :

body {
background-image : url('kertas.jpg');
}


Catatan : 
- Ingat, untuk nilai ini ( url('kertas.jpg'); ) url jangan sampai ada space dengan tanda (, karena jika kalian beri space, maka gambar tidak akan muncul


- Gunakanlah latar belakang gambar yang tidak menggangu teks, atau merusak isi content, nantinya pengunjung ataupun pembaca sulit membaca maksut dari artikel tersebut


Jika gambar tersebut kalian buat Horizontal, berikut scriptnya :

body {
background-images: url('kertas.jpg');
background-repeat: repeat-x;
}

3. Background-repeat

Background repeat yaitu properti yang digunakan untuk merubah posisi suatu gambar.


Contoh Gambar secara Horizontal:

body {
background-images: url('kertas.jpg');
background-repeat: repeat-x;
}


Contoh Gambar secara Vertikal:

body {
background-images: url('kertas.jpg');
background-repeat: repeat-y;
}

4.  Background-attachment

Properti yang diguanakn untuk mengatur gerak dari latar belakang gambar pada halaman sebuah web atau blog kalian, contoh latar belakang halaman web atau blog dapat kalian liat pada script dibawah ini :

Contoh :

body {
background-images: url('kertas.jpg');
background-atachment: fixed;
}


Posisi background akan diam ditempat, hanya bagian isi, header, dan footer yang bergerak ke atas.

5. Background-position

Properti ini berfungsi untuk mengubah posisi suatu elemen.

Contoh :

body {
background-images: url('kertas.jpg');
background-atachment: fixed;
background-position: right top;
}

Tambahan :

Background - Shorthand Property

Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti background dalam satu properti tunggal, ini disebut Shorthand Properti.

Contoh :

body {
background: #ffffff url('kertas.jpg') no-repeat right top;
}


Keterangan Properti CSS Background :

background Mengatur semua properti background dalam satu deklarasi
background-attachment Menentukan apakah gambar latar belakang  tetap atau gulungan dengan sisa halaman
background-color Mengatur warna latar belakang dari elemen
background-image Mengatur gambar latar belakang untuk elemen
background-position Mengatur posisi awal dari gambar latar belakang
background-repeat Mengatur berapa gambar latar belakang akan diulang


Sekian tutorial dari saya, apabila kalian masih kebingungan dalam mencerna materi, silahkan bisa sambil dipraktekkan, dan bisa bertanya dikolom komentar dibawah artikel ini, Terimakasih.

Bagikan Artikel ini