Tutorial CSS : Belajar Background CSS

Dalam CSS, jika kamu ingin melakukan styling berupa memberikan warna atau gambar pada background element kamu bisa menggunakan properti background.

CSS memiliki beberapa properti yang berhubungan dengan background seperti background-color, background-image, background-repeat, background-attachment dan background-position.

Kita akan bahas satu-persatu.

1. background-color

background-color berfungsi untuk memberikan warna pada HTML elemen.

Contohnya: Bagaimana cara kita memberikan warna biru pada sebuah div?

<div style="background-color:blue">Elemen dengan background-color biru</div>

Hasilnya:

Kamu bisa memakai nilai color berupa:

1. nilai HEX – seperti #ff0000
2. nilai RGB – seperti rgb (255,0,0)
3. nama color – seperti blue

2. background-image

background-image digunakan untuk memberikan latar belakang pada sebuah elemen tapi berupa gambar.

Misalnya kamu ingin membuat sebuah div dengan gambar sebagai latar belakangnya. Caranya adalah dengan menggunana background-image.

Sintaknya adalah background-image: url('path_ke_gambar_background').

Contohnya:

.div {
  background-image: url('https://randomwordgenerator.com/img/picture-generator/53e5dc454c54a514f1dc8460962e33791c3ad6e04e507749742d7cd79e4cc0_640.jpg');
}

Jika kita implementasikan class di atas, maka tampilan divnya akan jadi seperti di bawah ini:

Sebaiknya kamu set width dan height dari elemen HTML sehingga gambar background bisa terlihat.

3. background-repeat

background-repeat berfungsi untuk mengatur apakah gambar background yang di set oleh properti background-image bisa berulang atau tidak.

Value dari background-repeat ada 4 yaitu:

1. repeat: ini artinya gambar background akan diulang memenuhi wilayah div baik ke x dan y axis.
2. no-repeat: ini artinya gambar backround hanya akan ada 1 di dalam elemen html.
3. repeat-x: ini artinya gambar backround akan di ulang ke arah x axis atau dari kiri ke kanan.
4. repeat-y: ini artinya gambar backround akan di ulang ke arah y axis atau dari atas ke bawah.

Contohnya bisa dilihat di bawah:

4. background-position

Jika kamu ingin mengatur posisi dari gambar backgroud, maka kamu perlu menggunakan properti background-position.

Secara default, gambar background akan berada di posisi atas kiri (top left). Nah jika kita ingin agar gambar background berada di tengah-tengah misalnya, maka kita bisa set value dari background-position:center .

Value dari background-position bisa berupa: top, right, bottom, left, dan center. Kamu bisa mengkombinasikan 2 value sekaligus, misalnya top right atau bottom left.

Kamu juga bisa memberikan value berupa pixel atau %;

Kita akan bahas satu-persatu.

Contoh posisi default gambar:

Contoh posisi default gambar dengan value right:

Contoh posisi default gambar dengan value top right:

Contoh posisi default gambar dengan value bottom left:

Contoh posisi default gambar dengan value center:

Nah kamu bisa coba-coba kombinasi value lainnya ya jadi semakin mengerti tentang background-position.

5. background-attachment

Jika kamu ingin membuat gambar background menjadi fixed, maka kamu bisa memakai properti background-attachment. Valuenya bisa berupa fixed atau scroll

Contonya bisa kamu cek di link ini: https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_attachment

5. background-size

background-size berfungsi untuk menentukan ukuran dari gambar background.

Adapun value dari background-size adalah:

Contohnya bisa kamu cek di link ini: https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

6. Background Shorthand

Dalam penulisan css tentang backgroud, kamu bisa mempersingkat penulisan kode dengan background shorthand. Kamu bisa menulis semua properti background sekaligus.

Contohnya:

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

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

Dari contoh di atas, hasilnya akan sama antara css yang atas dan bawah.

Namun ada yang perlu kamu perhatikan dalam penggunaan background shorthand yaitu urutan dalam penulisannya.

Urutan value dari background shorthand:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Kamu bisa melewati value yang tidak dibutuhkan, asalkan urutannya sudah benar, css kamu masih bisa berjalan.

Nah itulah pembahasan tentang properti background dalam css. Semoga artikel ini bisa membuat kamu lebih mengerti tentang background dalam css.

Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS