Tutorial Cascading Style Sheet (CSS) - Background Property

Pada kesempatan kali ini kita akan belajar membuat background. Background berarti sebuah visual yang tujuannya sebagai latar belakang. Properti untuk background adalah bisa berupa warna atau gambar. Disamping berupa warna, atau gambar, opsi untuk background bisa juga seperti perulangan dan posisi.
Adapun properti yang bisa digunakan untuk background ini antara lain :

background-color, untuk menentukan warna background.
background-image, untuk menentukan gambar sebagai background.
backgroung-repeat, mengatur perulangan background gambar. Secara default, gambar akan diulang hingga memenuhi halaman, namun dengan CSS kita bisa memiliki 3 opsi perulangan, diantaranya adalah :

repeat-x, artinya gambar diulang secara horisontal dari kiri ke kanan.
repeat-y, artinya gambar diulang secara vertikal dari atas ke bawah.
no-repeat, berarti gambar tidak di ulang.

4. Backgroung-position, untuk mengatur posisi gambar, apakah di atas,tengah,bawah,kiri, kanan atau gabungan keduanya.

Baiklah untuk mulai mencoba membuat script background, kita akan belajar memberikan background untuk elemen body, berikut contoh scriptnya :


body{
    background-color:#D5F;
    background-image:url(mawar.jpg);
    background-repeat:repeat-y;
    background-position:center;
}

catatan : letakkan gambar satu folder dengan dokumen html.

Sekarang coba diterapkan pada halaman html berikut :


<html>
<head>
<title>Belajar</title>

<style>
body{
    background-color:#DFC;
    background-image:url(mawar.jpg);
    background-repeat:repeat-y;
    background-position:right;
}

</style>

</head>
<body>
  <div>  
    <h1>Coding Pertamaku</h1>
    <p>Percayalah kalo kita belajar pasti akan menemukan kesulitan. dan kesulitan itulah <br> 
       bumbu-bumbu dapur yang akan bisa membuat kita berhasil jika kita mampu melewati kesulitan <br>
       yang ada baik rintangan, ancaman, hambatan dan gangguan <b>(HTAG)</b>dari luar diri kita.<p>
    <a href="http://www.google.com"> Baca Selanjutnya</a>
  </div>         

</body>
</html>

dan hasilnya setelah dilihat melalui browser akan tampil seperti berikut :

Penjelasan dari code css bacnkground diatas adalah :

backgroun-color : adalah warna yang akan diterapkan. disana ada kode warna #DCF, untuk warna yang lain bisa langsung di tulis red, green,blue atau jika code tersebut di tulis menggunakan editor dreamweaver, kita akan bisa memilih kode warna sesuai kesukaan.
background-image, gambar yang akan dipakai harus terdapat di folder yang sama
background-repeat, gambar akan di ulang secara vertikal.
background-position, posisi gambar pada sebelah kanan.

Demikian tutorial mengenai background properties, dah silahkan berkreasi sesering mungkin agar mndapatkan tampilan yang sesuai dengan apa yang menjadi keinginan bagaimana desain web yang bagus. Karena tanpa jam terbang yang tinggi dalam desain web, tidak mungkin kita bisa membuat web langsung indah, maka diperlukan ketelatenan.
Selamat belajar dan berkarya.

Lautan Pasir

Tutorial Cascading Style Sheet (CSS) - Background Property