Belajar css memberikan background pada elemen

belajar css

Kegunaan background

Pada CSS Anda bisa memberikan style untuk background atau latar belakang, kebanyakan orang menggunakan property background untuk mengatur warna latar belakang atau memberikan gambar latar belakang. CSS menyediakan beberapa property untuk styling latar belakang seperti: background-colorbackground-imagebackground-repeatbackground-attachmentdan background-position.

Background color

Dengan property background-color Anda bisa 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

Contoh:

Editor Online
  1. h1 {
  2. background-color: green;
  3. }
  4. p {
  5. background-color: orange;
  6. }

Background image

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

Contoh:

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

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 property background-repeat Anda bisa 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.

Contoh:

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

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

Contoh:

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

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

Contoh:

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

Background position

Dengan property 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.

Contoh:

Editor Online
  1. body {
  2. background-image: url(“https://hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
  3. background-repeat: no-repeat;
  4. background-position: right top;
  5. }

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

Background attachment

Dengan property 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

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

Contoh:

Editor Online
  1. body {
  2. background-image: url(“https://hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
  3. background-repeat: no-repeat;
  4. background-position: right top;
  5. background-attachment: fixed;
  6. }

Agar bisa melihat perbedaan antar background-attachment: fixed dan background-attachment: scroll. Silakan Anda gulir atau scroll mousenya dari contoh keduanya. Supaya bisa melihat perbedaanya.

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

Contoh:

Editor Online
  1. body {
  2. background-image: url(“https://hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
  3. background-repeat: no-repeat;
  4. background-position: right top;
  5. background-attachment: scrol;
  6. }

Agar bisa melihat perbedaan antar background-attachment: fixed dan background-attachment: scroll. Silakan Anda gulir atau scroll mousenya dari contoh keduanya. Supaya bisa melihat perbedaanya.

Background shorthand

Background shorthand digunakan untuk mempersingkat kode, dimungkinkan juga untuk menentukan semua property background dalam satu property tunggal. Ini disebut property steno.

Property singkatan untuk background sendiri adalah background.

Contoh:

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

Saat menggunakan property steno urutan nilai property adalah:

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

Tidak masalah jika salah satu nilai property 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 property background

PropertyKegunaanya
backgroundMengatur semua property latar belakang dalam satu deklarasi
background-colorMengatur warna latar belakang
background-imageMengatur gambar latar belakang
background-repeatMengatur pengulangan gambar latar belakang
background-positionMengatur posisi gambar latar belakang
background-attachmentMengatur apakah gambar latar belakang fixed atau scroll

Leave a Reply

Your email address will not be published. Required fields are marked *