Minggu, 09 April 2017

Belajar CSS Dasar Bagian 6 – Background

    Assalamualaikum Wr. Wb. Selamat datang kembali sahabat lupacode semua di blog Lupa Code Masih bersama saya selaku admin dari blog lupacode. Pada hari kemarin kita telah membahas mengenai Belajar CSS Dasar Bagian 5 – Text Styling. Bagi sahabat lupacode yang baru saja gabung disini atau baru masuk ke artikel ini, saya sarankan untuk mempelajari pembahasan materi dari yang pertama agar sahabat paham maksud dari kelanjutan pembahasan yang selanjutnya. Atau sahabat bisa langsung mengunjungi halaman Daftar isi pada blog ini.

lupacode - Belajar CSS Dasar Bagian 6 – Background

     Selamat malam sahabat lupacode, pada kesempatan kali ini saya akan melanjutkan pembahasan materi css selanjutnya yaitu mengenai Background. Di dalam css itu kita bisa memberikan background kepada element – element yang ada temasuk halamannya sendiri. Nanti kita bisa kasih background pada body atau pada elemen – elemen spesifik. Property pada background itu ada empat, yaitu :
  • Background-color => Mengatur warna pada background
  • Background-image => Mengatur gambar yang akan digunakan pada background
  • Background-position => Mengatur posisi gambar pada background
  • Background-repeat => mengatur jenis pengulangan gambar pada background
     Oke langsung saja kita praktekan untuk mencobanya, disini saya sudah membuat file html dengan nama index.html dan saya sudah mempunyai dua buah gambar untuk dijadikan background lalu saya simpan save di dalam folder yang sama kemudian saya buat lagi folder dengan nama folder gambar di dalamnya.
     Baiklah yang pertama akan kita coba adalah property Background-color. Contohnya adalah seperti ini syntax nya
body { background-color: lightblue; }

Kita lihat hasilnya maka akan beubah menjadi seperti ini
lupacode - Belajar CSS Dasar Bagian 6 – Background 1

     Yang kedua adalah Background-image lalu disini saya akan menggunakan gambar yang sudah save sebelumnya di folder yang sama lalu didalamnya saya buat lagi folder dengan nama gambar. Gambar satu saya kasih nama gbr1.png ukuran dimensi gambarnya adalah 400 x 400 pixel. Baiklah sekarang kita coba tambahkan property background-image nya sehingga menjadi seperti ini

body {
            background-color: lightblue;
            background-image: url(gambar/gbr2.png);
         }

Sekarang kalian lihat hasilnya adalah seperti ini

lupacode - Belajar CSS Dasar Bagian 6 – Background 2

        Secara default gambar background itu akan selalu diulang terhadap sumbu X dengan sumbu Y . seperti pada gambar yang saya masukan, sebetulnya ukurannya adalah 400 x 400 pixel saja, tetapi dia akan selalu di ulang sehingga menjadi full widht. Gimana menarik bukan ? atau saya coba gambar yang kedua. Jadi syntax nya adalah seperti ini
background-image: url(gambar/gbr2.png);

lupacode - Belajar CSS Dasar Bagian 6 – Background 3


        Kita lihat hasilnya tetap sama gambar akan selalu diulang. Padahal ukuran gambar yang kedua itu adalah 400 x 400 pixel. Biasanya kalau kalian menggunakan sebuah gambar seperti saya diatas, gambar yang berpola. Saya ada sebuah website yang sering saya gunakan, kalian bisa langsung mengunjungi website tersebut yaitu https://www.toptal.com/designers/subtlepatterns/ disana terdapat banyak pola / gambar yang sangat keren untuk kalian bisa pakai di website kalian.
        Tapi jika kalian hanya ingin mengulang satu sumbu saja, misalkan sumbu X saja ke kanan, atau sumbu Y saja ke bawah. Kalian bisa menambahakan property yang namanya Background-repeat value nya ada beberapa yang pertama ada repeat-x; jadi si gambar hanya akan diulang dari kiri ke kanan dengan sumbu X secara penuh. Sekarang saya coba tambahkan kedalam syntax di atas, sehingga menjadi seperti ini

body {
            background-color: lightblue;
            background-image: url(gambar/gbr2.png);
            background-repeat: repeat-x;


          }

Kalian bisa lihat hasilnya adalah seperti ini

lupacode - Belajar CSS Dasar Bagian 6 – Background 4

        Jadi gambar hanya akan diulang terhadap sumbu X saja, yaitu dari kiri ke kanan. Sedangkan ke bawah akan tetap mengikuti background-color sebelumnya. Jadi sekarang kalian paham yah, sekarang bagamana jika pengulangan nya hanya ingin tehadap sumbu Y saja atau dari atas ke bawah saja. Maka kita cukup menggunakan value repeat-y saya coba contohkan menjadi seperti ini
background-repeat: repeat-x;
sehingga hasilnya akan menjadi seperti ini
lupacode - Belajar CSS Dasar Bagian 6 – Background 5

Satu lagi ada value yang ketiga yaitu no-repeat supaya gambarnya tidak diulang. Saya contohkan lagi seperti ini
background-repeat: no-repeat;
Sehingga hasilnya akan menjadi seperti ini

lupacode - Belajar CSS Dasar Bagian 6 – Background 6

      Kalau kalian menambahkan value no-repeat maka kalian sekarang punya akses ke dalam property yang terakhir yaitu background-position . lalu posisisnya ini macam-macam ada posisi terhadap sumbu Y dan ada juga posisi terhadap sumbu X Jadi untuk posisi sumbu Y itu bisa top/center/buttom sedangkan posisi untuk sumbu X itu left/center/right jadi kalian bisa kombinasikan value-value ini sehingga hasilnya nanti seperti ini
lupacode - Belajar CSS Dasar Bagian 6 – Background 7

    Nah ke empat property tadi bisa kita singkat sama seperti pada property font yang telah kita pelajari pada materi sebelumnya. Urutannya adalah seperti ini
Background: color url () position repeat;

      Sekarang saya coba akan singkat syntax nya sesuai dengan urutannya, sehingga menjadi seperti ini syntax nya

body {
            background: skyblue url(gambar/gbr2.png) no-repeat top center; 
          }

Kita lihat hasilnya akan tetap sama saja

lupacode - Belajar CSS Dasar Bagian 6 – Background 8

      Oke baiklah saya rasa sudah cukup untuk background pada css kali ini. Kita akan lanjutkan ke pembahasan materi selanjutnya yaitu Belajar CSS DasarBagian 7 – Selector CSS

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon