CSS Background

Background Color

Properti background-color menentukan warna latar belakang dari elemen.

Warna latar belakang halaman diatur seperti ini:

body {
    background-color: #b0c4de;
}

Dengan CSS, warna yang paling sering ditentukan oleh:

1. nilai HEX - seperti "# ff0000"

2. nilai RGB - seperti "rgb (255,0,0)"

3.nama warna - seperti "merah"

Lihatlah Nilai Warna CSS untuk daftar lengkap dari nilai warna mungkin.

Pada contoh di bawah ini, <h1>, <p>, dan <div> elemen memiliki warna latar belakang yang berbeda:

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

Background Image

Properti background-image menentukan gambar untuk digunakan sebagai latar belakang suatu elemen.

Secara default, gambar diulang sehingga mencakup seluruh elemen.

Latar belakang gambar untuk halaman dapat diatur seperti ini:

body {
    background-image: url("paper.gif");
}

Di bawah ini adalah contoh dari kombinasi yang buruk dari teks dan gambar latar belakang. Teks hampir tidak terbaca:

body {
    background-image: url("bgdesert.jpg");
}

Background Image - Repeat Horizontally or Vertically

Secara default, properti background-image mengulangi gambar secara horisontal dan vertikal.

Beberapa gambar harus diulang hanya horizontal atau vertikal, atau mereka akan terlihat aneh, seperti ini:

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

Jika gambar diulang hanya secara horizontal (mengulang-x), latar belakang akan terlihat lebih baik:

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

Background Image - Set position and no-repeat

Menampilkan gambar hanya sekali ditentukan oleh properti background-repeat:

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

Dalam contoh di atas, gambar latar belakang ditampilkan di tempat yang sama seperti teks. Kami ingin mengubah posisi gambar, sehingga tidak mengganggu teks terlalu banyak.

Posisi gambar yang ditetapkan oleh properti background-position:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Background - Shorthand property

Seperti yang dapat Anda lihat dari contoh di atas, ada banyak sifat yang perlu dipertimbangkan ketika berhadapan dengan latar belakang.

Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti dalam satu properti tunggal. Ini disebut properti steno.

Properti singkatan untuk latar belakang hanya "background":

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Bila menggunakan properti singkatan urutan nilai properti adalah:

1. warna latar belakang

2. background-image

3. background-repeat

4. background-attachment

5. background-position

Tidak masalah jika salah satu dari nilai properti yang hilang, asalkan orang-orang yang hadir dalam urutan ini.