Tutorial Belajar CSS Part 18 – Merubah Background dengan CSS

Posted on Posted in Tutorial CSS

Dalam tutorial ini kita akan membahas mengenai cara merubah background dari web dengan menggunakan CSS, CSS menyediakan beberapa fitur yang dapat digunakan untuk merubah tampilan background, baik menggunakan image ataupun warna.

Anda tidak hanya bisa merubah background di halaman web saja, anda juga bisa merubah warna dari background objek seperti paragraf, tabel serta obyek obyek lainnya, baik langsung saja kita bahas beberapa hal yang CSS Sediakan untuk mengatur background.

Background Color

Anda dapat mengganti background sebuah obyek dengan menggunakan properti ini, semisal ingin mengganti background web, atau bagian obyek lainnya, silahkan perhatikan skrip dibawah ini :

nah semisal kita simpan dengan nama background_color.html lalu kita buka di browser, maka hasilnya adalah sebagai berikut :

nah perhatikan untuk warna backgroundnya menjadi warna hijau, hal tersebut karena kita menggunakan property background-color, dengan selector body sehingga background webnya menjadi warna hijau.

Selain untuk background web anda juga dapat menggunakan perintah background-color pada obyek HTML lainnya, silahkan perhatikan skrip dibawah ini  :

 

semisal kita simpan dengan nama background-color2.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

maka hasilnya seperti gambar diatas, penjelasannya sebagai berikut :

  • h1 memiliki background berwarna orange karena skrip css h1{bacgkround-color:orange;}
  • bagian obyek div mendapatkan background berwarna biru karena skrip css div{background-color:aqua;}
  • paragraf akan mendapatkan background berwarna kuning karena skrip css p{background-color:yellow;}

 

Background Image

Selain background warna anda juga dapat merubah background dengan gambar, dengan menggunakan perintah background-image:

silahkan perhatikan skrip dibawah ini :

 

semisal kita simpan dengan nama background-image.html, dan pastikan file gambar yang digunakan (dalam contoh ini gambar.jpg) tersimpan dalam satu folder yang sama dengan file background-image.html

 

lalu silahkan buka file html background_image.html

maka hasilnya sebagai berikut :

terlihat background web akan sesuai gambar yang dipilih, gambar menjadi berulang karena ukuran resolusi gambar kecil, sehingga gambar akan ditampilkan secara berulang

 

 

Property Background-repeat

property ini digunakan untuk mengatur perulangan dari gambar yang digunakan sebagai berikut, hal ini digunakan jika gambar yang digunakan untuk background memiliki ukuran resolusi kecil, adapun beberapa value yang bisa anda gunakan adalah :

  • repeat-x : digunakan untuk melakukan perulangan secara horizontal
  • repeat-y : digunakan untuk melakukan perulangan secara vertikal
  • no-repeat : digunakan untuk menonaktifkan fitur perulangan

Jadi penggunaan skripnya adalah seperti berikut ini :

maka hasilnya adalah sebagai berikut :

 

hasil background-repeat:repeat-x;

hasil background-repeat:repeat-y;

hasil background-repeat:no-repeat;

Bagaimana mudah bukan untuk mengatur background dengan menggunakan CSS, anda cukup menggunakan property background-color (untuk merubah warna) dan background-image(untuk merubah background gambar) serta menggunakan property background-repeat (mengatur perulangan dari gambar yang digunakan untuk background).

Baik sekian dulu kawan pembahasan kita mengenai cara merubah background dengan CSS, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial selanjutnya.

 

Leave a Reply

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