Tutorial CSS : Belajar Background CSS

By Admin
CSS
27 Jul 2022

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:

Elemen dengan background-color biru

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:

ValueDeskripsi
autoUkuran gambar seperti aslinya.
percentUkuran gambar di set berapa persen, misalnya 50% dari ukuran aslinya.
coverresize ukuran gambar mengikuti ukuran elemen HTML. Gambar mungkin akan di resize atau di crop agar bisa memenuhi elemen.
containresize ukuran gambar agar bisa terlihat semua di dalam elemen. berbeda dengan cover, contain tidak memotong gambar.

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

Artikel Lainnya

Artikel lain yang mungkin menarik juga untuk kamu baca.

Tutorial CSS : Styling Text CSS

Bagaimana cara styling text dengan css. Styling text dalam css termasuk bagaimana cara memberikan warna pada text, text docaration, text transform dan lainnya.
Admin
5 min read

Tutorial CSS : Membuat List di CSS

List adalah salah satu elemen HTML yang digunakan untuk mengelompokkan informasi terkait sehingga menjadi kait mengait satu sama lain dan memudahkan untuk dibaca. Dalam pengembangan web modern, list adalah elemen yang sering digunakan untuk design navigasi.
Admin
5 min read

Tutorial CSS : Membuat Margin CSS

Margin CSS berfungsi untuk memberikan batas di luar sebuah elemen, di luar border dari sebuah elemen.
Admin
5 min read

© 2024