Belajar CSS Part 3 - Background

Assalamu'alaikum warohmatullaahi wabarokatuh.

Properties background digunakan untuk mengatur efek latar belakang dari sebuah elemen. Kita bisa memilih background dengan dua pilihan :

• Background warna
• Background gambar

A. BACKGROUND WARNA

Opsi pertama, kita bisa menggunakan background warna. Kelebihan dari menggunakan background warna, yaitu lebih fleksibel dan lebih ringan. 

Untuk menggunakan background warna kita bisa menggunakan nama warna, kode Hexa, ataupun kode RGB. Penjelasan tentang kode-kode ini bisa Anda lihat di Belajar HTML Part 19 tentang Penyisipan Warna. Berikut contoh script untuk menggunakan background warna :

h1 {
    background-color: green;
}
div {
    background-color: #ff0000;
}
p {
    background-color: rgb(0,0,255);
}

Penjelasan :

• Dengan script di atas, elemen h1 akan memiliki background berwarna hijau. Elemen div akan memiliki background berwarna merah, dan elemen p akan memiliki background biru.

 Coba sendiri di sini
 

B. BACKGROUND GAMBAR

Opsi kedua, kita bisa menggunakan gambar sebagai background. Dengan menggunakan background gambar, kita bisa menambahkan beberapa pengaturan tambahan :

• background-repeat
• background-position
• background-attachment

Berikut contoh script-nya :

body {
    background-image: url("gambar/contoh_bg_gambar.jpg");
    background-repeat: repeat-x;
    background-attachment: fixed;

    background-position: right top;
}

Penjelasan :

• background-image digunakan untuk memilih gambar yang akan digunakan. lokasi gambar kita tulis dalam tanda kurung. Dalam contoh di atas, gambar yang digunakan untuk background bernama contoh_bg_gambar.jpg yang berlokasi di dalam folder gambar. Anda bisa mengubahnya sesuai kebutuhan.
• background-repeat digunakan untuk mengatur pengulangan gambar. repeat-x berarti gambar akan berulang secara horizontal. Jika ingin gambar berulang secara vertikal, kita bisa menggunakan repeat-y
• background-attachment : fixed; berarti gambar tidak akan mengikuti tampilan layar jika di-scroll
• background-position digunakan untuk mengatur posisi gambar. right top berarti gambar akan berada di posisi kanan atas.

Coba sendiri di sini

C. BACKGROUND SHORTHAND PROPERTY

Background Sorthand Property maksudnya, kita bisa meringkas seluruh property dalam satu kali deklarasi. Caranya bisa kita lihat dalam contoh berikut :

body {
    background: #ffffff url("gambar/contoh_bg_gambar.jpg") repeat-x fixed right top;

}

Dalam contoh di atas, kita meringkas seluruh deklarasi dalam satu property.

 Coba sendiri di sini


Demikian Seri Belajar CSS tentang Background, Semoga bermanfaat.
Terima kasih, wassalamu'alaikum warohmatullaahi wabarokaatuh.