Background CSS

1 114

Properti latar belakang CSS digunakan untuk menentukan efek latar belakang pada elemen.

Property Background CSS:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Warna latar belakang

Properti warna latar belakang menentukan warna latar belakang elemen.

Warna latar belakang halaman diatur seperti ini:

Contoh


body {
background-color: lightblue;
}

Coba Layout Editor »

Dengan CSS, warna paling sering ditentukan oleh:

nama warna yang valid – seperti “merah”
nilai HEX – seperti “#ff0000”
nilai RGB – seperti “rgb (255,0,0)”
Lihatlah Nilai Warna CSS untuk daftar lengkap nilai warna yang mungkin.

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

Contoh


h1 {
background-color: green;
}
div {
background-color: lightblue;
}p {
background-color:
yellow;

}

Coba Layout Editor »


Gambar latar belakang

Properti background-image menentukan gambar yang akan digunakan sebagai latar belakang elemen.

Secara default, gambar diulang sehingga mencakup keseluruhan elemen.

Gambar latar belakang untuk halaman dapat diatur seperti ini:

Contoh


body {
background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/bg-color.jpg);
}

Coba Layout Editor »

Berikut adalah contoh kombinasi teks dan gambar latar belakang yang buruk. Teksnya hampir tidak bisa dibaca:

Example


body {
background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/bgdesert.jpg);
}

Coba Layout Editor »

Catatan: Bila menggunakan gambar latar belakang, gunakan gambar yang tidak mengganggu teks.


Gambar Latar Belakang – Ulangi secara horisontal atau vertikal

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

Beberapa gambar harus diulang hanya secara horisontal atau vertikal, atau akan terlihat aneh, seperti ini:

Contoh


body
{
background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/gradient_bg.png);}

Coba Layout Editor »

Jika gambar di atas diulang hanya secara horisontal (background-repeat: repeat-x;), background akan terlihat lebih baik:

Contoh


body
{
background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/gradient_bg.png);background-repeat: repeat-x;}

Coba Layout Editor »

Tip: Mengulang gambar secara vertikal, atur background-repeat: repeat-y;


Background Image – Tetapkan posisi dan no-repeat

Menampilkan gambar latar belakang hanya sekali juga ditentukan oleh properti pengulang latar belakang:

Contoh


body
{
background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/img_tree.png);background-repeat: no-repeat;}

Coba Layout Editor »

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

Posisi gambar ditentukan oleh properti background-position:

Example


body
{
background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/img_tree.png);background-repeat: no-repeat;background-position: right top;}

Coba Layout Editor »


Gambar Latar Belakang – Posisi Tetap

Untuk menentukan bahwa gambar latar belakang harus diperbaiki (tidak akan bergulir dengan sisa halaman), gunakan properti background-attachment:

Contoh


body
{
background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/img_tree.png);background-repeat: no-repeat;background-position: right top;
background-attachment: fixed;}

Coba Layout Editor »


Latar Belakang – Properti Singkatan
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti latar belakang dalam satu properti tunggal. Ini disebut properti singkatan.

Properti singkat untuk latar belakang adalah background:

Contoh


body {
background: #ffffff url(https://www.infokoding.com/wp-content/uploads/2017/10/img_tree.png) no-repeat right top;
}

Coba Layout Editor »

Bila menggunakan properti singkat, urutan nilai properti adalah:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Tidak masalah jika salah satu nilai properti hilang, asalkan yang lain ada dalam urutan ini.


Semua Properti Background CSS

Property Description
background Sets all the background properties in one declaration
background-attachment Menetapkan bagaimana gambar latar akan diulang
background-color Mengatur warna latar belakang elemen
background-image Mengatur gambar latar belakang untuk sebuah elemen
background-position Mengatur posisi awal gambar latar belakang
background-repeat Menetapkan bagaimana gambar latar akan diulang

Get real time updates directly on you device, subscribe now.

1 Comment
  1. […] Penjelasan Background Properties » […]

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.