Porperties untuk mengatur background menggunkan CSSPertama-tama saya ucapkan terimakasih telah berkunjung ke situs ilmukita ini. kali ini ilmukita akan memposting tentang cara mengatur background sebuah elemen html menggunkan CSS.Oke langsung aja.

Porperties untuk mengatur background menggunkan CSS

  1. Background color
    Properties background color ini berfungsi untuk menentukan warna latar belakang (background). Berikut cara mendeklarasikan properties background color :

    Dimana untuk  pemberian value bisa dengan 3 metode yaitu metode nama warna,metode HEX dan metode RGB.
    Berikut contoh mewarani latar belakang sebuah paragraf

    Output

    menggunakan metode nama warna

    menggunakan metode HEX

    menggunakan metode RGB

  2. Background image
    Properties background image digunakan untuk merubah latar belakang  menggunkan gambar dan secara default, gambar akan diulang sehingga mencakup keseluruhan elemen.Jika gambar tidak ingin di ulang terus menerus maka kita bisa menggunkan properties background-repeat. Berikut cara mendeklarasikan properties background image :

    Berikut contoh penggunaan properties background image di tag Division.

    Output
    menggunakan properties background image
    menggunakan properties background color
  3. Background repeat
    Kita telah menyinggung poperties ini di properties background image, fungsi properties repeat yaitu untuk mengatur gambar yang akan di tampilkan apakah gambar ditampilkan secara diulang baik secara horizontal,vertikal ataupun tidak diulang. Berikut cara mendeklarasikan properties background repeat :

    Dimana value :

    value keterangan
    repeat-x Menampilkan gambar akan diulang secara horizontal
    repeat-y Menampilkan gambar akan diulang secara vertikal
    no-repeat Menampilkan gambar tidak akan diulang secara horizontal amapun verikal

    Berikut contoh penggunaan properties background repeat di tag Division.

    Output

    gambar diulang secara vertikal maupun horizontal

    gambar diulang secara vertikal

    gambar diulang secara horizontal

    gambar tidak diulang secara vertikal maupun horizontal

  4. Background position
    Properties background position digunakan untuk mengatur posisi gambar. Berikut cara mendeklarasikan properties background position :

    Daftar value properties background position

    ValueX ValueY Keterangan
    left top posisi gambar di kiri atas
    left center posisi gambar di kiri tengah
    left bottom posisi gambar di kiri bawah
    right top posisi gambar di kanan atas
    right center posisi gambar di kanan tengah
    right bottom posisi gambar di kanan bawah
    center top posisi gambar di tengah atas
    center center posisi gambar di tengah-tengah
    center bottom posisi gambar di tengah bawah
    value% value% value menggunakan hitungan persen
    valuepx valuepx value mengunakan hitungan pixsel

    Berikut contoh penggunaan properties background repeat di tag Division.

    Output

    Posisi gambar di kanan tengah

    Posisi gambar menggunakan hitungan persen

    Posisi gambar menggunakan hitungan pixsel

LEAVE A REPLY

Please enter your comment!
Please enter your name here