Belajar Styling Background Dalam CSS

Pada kesempatan kali ini Blog Pintasku akan membahas seputar Tutorial Belajar CSS, nahh sebelumnya saya pernah menjelaskan kalau syntax yang ada didalam penulisan CSS itu ada 3 macam, yaitu Selector, Properti dan Value (nilai). Untuk sekarang saya akan menjelaskan tentang Property.

Di dalam CSS itu ada banyak macam-macam property, tetapi untuk sekarang saya akan jelaskan 1 jenis property, yaitu property Background.

CSS Styling Background

Property background itu digunakan untuk menentukan gaya atau efek latar belakang (Background) dari suatu elemen. Di dalam CSS property background itu ada 5 macam, dan setiap property background memiliki kegunaan tersendiri.

1. Background-color

Property Background-color ini digunakan untuk mengatur background (latar belakang) suatu elemen dengan menggunakan warna. Biasanya di dalam CSS itu untuk menentukan nilai (value) warna ada 3 cara, yaitu :

1. Menggunakan Nilai Hex, contohnya seperti "#ff0000"
2. Menggunakan Nilai RGB, contohnya seperti "rgb(255,0,0)"
3. Menggunakan Nilai dari nama warna tersebut, contohnya seperti "blue, red, yellow, dll"

Berikut ini adalah contoh penggunaan Property Background-Color dalam CSS.

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

2.Background-Image

Property background-image ini menggunakan sebuah gambar sebagai backgroundnya. Jika gambar yang kita gunakan kecil atau tidak pass maka secara defaults gambar akan di ulang sehingga bisa menutupi latar belakang elemen tersebut.

Berikut ini adalah contoh penggunaan property background-image.

body {
    background-image: url("Alamat-gambar.png");
}

3. Background-repeat

Dari namanya juga pasti sudah mengerti kegunaan property ini, yaitu untuk mengulangi gambar, baik itu secara Vertical atau Horizontal. Value untuk background-repeat ini adalah sebagai berikut :

• repeat
• repeat-x : Untuk pengulangan secara Horizontal
• repeat-y : Untuk pengulangan secara Vertical
• no-repeat : Digunakan untuk membuat gambar tanpa pengulangan

Contoh penggunaan background-repeat di dalam CSS, sebagai berikut

body {
    background-image: url("Alamat-gambar.png");
    background-repeat: no-repeat;
}

4. Background-position

Property background-position digunakan untuk mengatur posisi awal dari gambar background. Berikut ini adalah contoh penggunaan background-position.

body
{
background-image:url(‘Alamat-gambar.png’);
background-repeat:no-repeat;
background-position:right top;
}

5. Background-attachment

Background-attachment digunakan untuk mengatur apakah gambar background apakah tetap dengan sisi halaman atau mengikuti arus halaman.

Berikut ini contoh penggunaan background-attachment di dalam CSS.

body
{
background-image:url(‘Alamat-gambar.png’);
background-repeat:no-repeat;
background-position:right top;

background-attachment:fixe;
}

Pada contoh di atas saya menggunakan value (nilai) "fixed" yang artinya gambar background akan tetap. Value yang bisa digunakan untuk property background-attachment ini, yaitu :

• scroll
• fixed
• inherit

Nahh sekian penjelasan mengenai Mengenal Property Background Dalam CSS semoga tulisan ini bisa bermanfaat dan bisa membantu sobat dalam Belajar CSS. terimakasih