Background

Warna Latar Belakang

Properti background-color menentukan warna latar belakang dari elemen.

Warna latar belakang halaman didefinisikan dalam pemilih tubuh:
contoh
body {
     background-color: # b0c4de;
}

Cobalah sendiri »

Dengan CSS, warna yang paling sering ditentukan oleh:

     nilai HEX - seperti "# ff0000"
     nilai RGB - seperti "rgb (255,0,0)"
     nama warna - seperti "merah"

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

Pada contoh di bawah ini, h1, p, dan elemen div memiliki warna latar belakang yang berbeda:
contoh
h1 {
     background-color: # 6495ed;
}

p {
     background-color: # e0ffff;
}

div {
     background-color: # b0c4de;
}

Cobalah sendiri »

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:
contoh
body {
     background-image: url ("paper.gif");
}

Cobalah sendiri »

Di bawah ini adalah contoh dari kombinasi yang buruk dari teks dan gambar latar belakang. Teks hampir tidak terbaca:
contoh
body {
     background-image: url ("bgdesert.jpg");
}

Cobalah sendiri »

Background Image - Ulangi Horisontal atau Vertikal

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:
contoh
body {
     background-image: url ("gradient_bg.png");
}

Cobalah sendiri »

Jika gambar diulang hanya secara horizontal (mengulang-x), latar belakang akan terlihat lebih baik:
contoh
body {
     background-image: url ("gradient_bg.png");
     background-repeat: repeat-x;
}

Cobalah sendiri »

Background Image - Mengatur posisi dan no-repeat
Catatan Catatan: Bila menggunakan gambar latar belakang, menggunakan gambar yang tidak mengganggu teks.

Menampilkan gambar hanya sekali ditentukan oleh properti background-repeat:
contoh
body {
     background-image: url ("img_tree.png");
     background-repeat: no-repeat;
}

Cobalah sendiri »

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:
contoh
body {
     background-image: url ("img_tree.png");
     background-repeat: no-repeat;
     background-position: kanan atas;
}

Cobalah sendiri »

Latar Belakang - Properti Singkatan

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":
contoh
body {
     background: url #ffffff ("img_tree.png") no-ulangi kanan atas;
}