Kode Background CSS | Kita Ngoding CSS #07

Background CSS.- Pada artikel kali ini kita akan sama-sama membahas tentang kode background css color, kode background css image, kode background css repeat, kode background css attachment, kode background css shorthand. Untuk lebih jelasnya, yuk kita langsung saja dengan contoh-contohnya.

KODE WARNA BACKGROUND PADA CSS

Untuk kode background css color adalah sebagai berikut :

    body {
      background-color: darkblue;
    }

Kamu bisa mengganti value dari property background-color menjadi blue, red, dan sebagainya tergantung selera.

Selain itu, kamu juga bisa mengatur transparansinya dengan perintah property opacity, contohnya sebagai berikut :

    body {
      background-color: green;
      opacity: 0.3;
    }

Transparansi dari background tergantung dari besar nilai opacity yang diberikan. Semakin kecil nilai opacity maka akan semakin transparan. Nilai opacity yang paling besar adalah 1 dan paling kecil adalah 0. Untuk contoh diatas kita berikan opacity dengan nilai 0.3 yang artinya 30%.

Supaya lebih jelas perhatikan gambar dibawah ini :

Adapun contoh yang lain dalam memberikan background warna adalah dengan menggunakan kode RGBA Value sebagai berikut :

    div {
      background: rgba(0, 128, 0, 0.6) /* Green background with 60% opacity */
    }

Baca Juga : Code Warna Dalam CSS

KODE BACKGROUND IMAGE PADA CSS

Untuk kode background css image adalah sebagai berikut :

    body {
      background-image: url("E:/css.png");
    }

Cara memanggil image yang akan di jadikan sebagai backgroud yaitu dengan memasukkan alamat dari image itu sendiri. Seperti contoh diatas, bahwa image yang bernama css.png berada di lokal hardisk E.

Outputnya sebagai berikut :

Baca Juga : Selector Pada CSS

KODE REPEAT BACKGROUND PADA CSS

Jika kamu perhatikan output dari background image diatas, terlihat bahwa image / gambarnya ditampilkan lebih dari satu kali, padahal kita memanggil file css.png hanya sekali.

Untuk mengatasi hal tersebut kita membutuhkan property background repeat untuk membersihkannya. contohnya sebagai berikut :

    body {
      background-image: url("E:/css.png");
      background-repeat: no-repeat;
      background-position: center top;
    }

Dengan kode background-repeat: no-repeat; kita telah membersihkan tampilan background image, sehingga image yang muncul sekarang hanya satu. Dan juga kode background-position: center top; untuk mengatur posisinya ke tengah atas. Kamu bisa kreasi sendiri nantinya dengan cara mengubah posisinya dengan perintah right atau left dan top atau button.

Selain itu kita juga bisa menambahkan background attachment dengan dengan kode seperti dibawah ini.

background-attachment: fixed;

Nilainya pun dapat kamu ubah dari fixed, scroll, local dan lain sebagainya. Nanti kamu coba sendiri ya.

Baca Juga : Cara Menggunakan CSS Di HTML

Kode Background CSS Shorthand

Sebenarnya kode diatas dapat kita buat lebih simple supaya tidak terlalu panjang lebar, dengan cara sebagai berikut.

Kode sebelumnya :

    body {
      background-color: green;
      background-image: url("E:/css.png");
      background-repeat: no-repeat;
      background-position: center top;
      background-attachment: fixed ;
    }

Kode Shorthand :

    body {
      bacground: green url("") no-repeat center top fixed;
    }

Terlihat lebih simple dan mudah bukan.?

Baiklah admin rasa cukup untuk bahasan kita pada kesempatan kali ini. kita akan berjumpa pada bahasan selanjutnya, jadi tetap jaga kesehatan ya.

Jangan lupa juga untuk membaca tulisan admin dibawah ini untuk menambah pengetahuan kalian tentang CSS pada HTML. Linknya telah admin taruh dibawah jadi tinggal kalian klik untuk berpindah ke halaman dengan judul yang tertera.

Artikel Lainnya :

Pengertian CSS dan Fungsinya | Kita Ngoding CSS #01 |

Syntax CSS | Kita Ngoding CSS #02 |

Selector Pada CSS | Kita Ngoding CSS #03 |

Cara Menggunakan CSS Di HTML | Kita Ngoding CSS #04 |

Membuat Komentar Di CSS | Kita Ngoding CSS #05 |

Code Warna Dalam CSS | Kita Ngoding CSS #06 |

Kode Background CSS | Kita Ngoding CSS #07 |

Cara Membuat Border Di CSS | Kita Ngoding CSS #08 |

Magin Dan Padding Pada CSS | Kita Ngoding CSS #09 |

CSS Height Dan Width | Kita Ngoding CSS #10 |

Box Model CSS | Kita Ngoding CSS #11 |