Belajar CSS – mengatur background dengan CSS

Background CSS

Pada CSS Anda bisa memberikan style untuk background atau latar belakang, kebanyakan orang menggunakan properti background untuk mengatur warna latar belakang atau memberikan gambar latar belakang. CSS menyediakan beberapa properti untuk styling latar belakang seperti: background-color, background-image, background-repeat, background-attachmentdan background-position.

Background-color

Dengan properti background-color Anda bisa menggunakannya untuk memberikan warna latar belakang pada elemen HTML.

Nilai color CSS yang paling sering gunakan:

• nilai HEX – seperti #ff0000
• nilai RGB – seperti rgb (255,0,0)
• nama color – seperti blue

h1 {
    background-color: green;
}
p {
    background-color: orange;
}

Background-image

Dengan properti background-image Anda bisa menggunakannya untuk menambahkan gambar latar belakang pada elemen HTML. Secara default background image akan mengulang gambarnya baik secara horizontal atau pun vertikal sehingga mencakup seluruh elemen.

body {
    background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
}

Masukan url gambar dengan benar. Jika tidak, gambar akan gagal dimuat atau tidak menampilkan apa-apa. Saat menggunakan gambar latar belakang, gunakan gambar yang tidak mengganggu teks atau elemen yang ada didalamnya.

Background-repeat

Dengan properti background-repeat Anda bisa menggunakannya untuk mengatur pengulangan gambar. Pada background repeat sendiri biasanya para programmer mengatur pengulangannya secara horizontal, vertikal atau tidak sama sekali. Berikut listnya beserta contoh didalamnya:

• background-repeat: repeat-x
• background-repeat: repeat-y
• background-repeat: no-repeat

Contoh: background-repeat: repeat-x yang berguna untuk mengontrol pengulangan secara horizontal.

body {
    background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
    background-repeat: repeat-x;
}

Contoh: background-repeat: repeat-y yang berguna untuk mengontrol pengulangan secara vertikal.

body {
    background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
    background-repeat: repeat-y;
}

Contoh: background-repeat: no-repeat yang berguna supaya tidak ada pengulangan gambar atau menampilkan gambar tunggal.

body {
    background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
    background-repeat: no-repeat;
}

Background-position

Dengan properti background-position Anda bisa menggunakannya untuk mengatur posisi gambar. Anda bisa mengatur background position dengan memasukan nilai posisi seperti dibawah ini:

top, right, bottom, left dan center (atas, kanan, bawah, kiri dan tengah)

atau

Anda juga bisa memasukan dengan patokan px ( pixel ) atau % ( persen ).

Silakan Anda masukan nilai dengan dua parameter. Pada contoh dibawah ini saya memasukan nilai: right top.

body {
    background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
    background-repeat: no-repeat;
    background-position: right top;
}

Jika Anda masih belum paham Anda bisa melihat Contoh lebih lengkapnya.

Background-attachment

Dengan properti background-attachment Anda bisa menggunakannya untuk mengatur apakah gambar bisa digulir atau posisi fixed ( tidak bisa digulir ).
Anda bisa mengatur background attachment dengan dua cara:

1. background-attachment: fixed
2. background-attachment: scroll

Contoh: background-attachment: fixed yang berguna supaya gambar tidak bisa digulir atau posisi tetap.

body {
    background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

Contoh: background-attachment: scroll yang berguna supaya gambar bisa digulir atau discroll ( ini defaultnya ).

body {
    background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: scrol;
}

Background shorthand

Dengan background shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti background dalam satu properti tunggal.

Untuk menggunakan background shorthand Anda cukup menggunakan properti background. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti contoh diatas.

body {
    background: #ffffff url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”) no-repeat right top;
}

Saat menggunakan properti steno 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.

Masih ada seputar background yang lainnya. Yaitu: background-clip, background-origin dan background-size. Anda akan belajarnya nanti pada tingkat advance.

Daftar properti background