Arabiyatuna

Belajar CSS Background

—

by

Arabiyatuna.Com
in

CSS Background

Properti background digunakan untuk mendefinisikan efek latar belakang dari elemen.

 

Properti background yang digunakan :

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

 

Background Color

Properti background-color menentukan warna latar belakang suatu elemen.

body { background-color:yellow; } h1 { background-color:#00ff00; } p { background-color:rgb(255,0,255); }

Atau seperti ini :

body { background:yellow; } h1 { background:#00ff00; } p { background:rgb(255,0,255); }

 

Nilai Keterangan
nama warna Menentukan warna dengan nama warna (harus berbahasa inggris), seperti red
hex Menentukan warna dengan kode hex, seperti #eeeeee
rgb Menentukan warna dengan kode rgb, seperti rgb(255,0,0)
transparan Menentukan bahwa warna background transparan, tulisannya seperti ini transparent

 

Macam-macam warna

 

Background Image

Properti background-image menentukan gambar untuk digunakan sebagai background suatu elemen.

 

Secara automatis, gambar diulang sehingga mencakup seluruh elemen.

body { background-image:url(http://3.bp.blogspot.com/_NUTOdYaT1os/TEUTzqEt4-I/AAAAAAAABjA/nYxiRch8hQg/s320/blue.jpg); }

Atau seperti ini :

body { background:url(http://3.bp.blogspot.com/_NUTOdYaT1os/TEUTzqEt4-I/AAAAAAAABjA/nYxiRch8hQg/s320/blue.jpg); }

 

Background Repeat

Properti background-repeat akan berguna, jika anda menggunakan gambar pada beckground anda, seperti :

body { background-image:url(http://lh3.ggpht.com/_NUTOdYaT1os/TQDk1ebZsWI/AAAAAAAACIk/r6nHAtVtTOs/CSS%20background.png); background-repeat:repeat-x; }

Atau seperti ini :

body { background:url(http://lh3.ggpht.com/_NUTOdYaT1os/TQDk1ebZsWI/AAAAAAAACIk/r6nHAtVtTOs/CSS%20background.png) repeat-x; }

 

Nilai Keterangan
repeat-x Background akan mengulang gambar secara horizontal atau menyamping
repeat-y Background akan mengulang gambar secara vertikal atau kebawah
no-repeat Gambar background tidak akan terjadi pengulangan

 

Background Posisi

Ini juga sama, akan bekerja jika anda menggunakan gambar pada backgound anda, seperti ini :

body { background-image:url(http://lh3.ggpht.com/_NUTOdYaT1os/TQDk1ebZsWI/AAAAAAAACIk/r6nHAtVtTOs/CSS%20background.png); background-position:center top; }

Atau seperti ini :

body { background:url(http://lh3.ggpht.com/_NUTOdYaT1os/TQDk1ebZsWI/AAAAAAAACIk/r6nHAtVtTOs/CSS%20background.png) center top; }

 

Nilai Keterangan
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		 Jika anda menulis hanya satu kata, maka secara automatis yang kedua “center” (kalau yang ketiga setan)
x% y% Penjelasan agak sedikit ribet. Coba saja sendiri, Jika top left seperti ini 0% 0%. Dan right bottom seperti ini 100% 100%.

 

Background Attachment

Ini masih sama, akan bekerja jika background menggunakan gambar, seperti ini :

body { background-image:url(http://3.bp.blogspot.com/_NUTOdYaT1os/TEUTzqEt4-I/AAAAAAAABjA/nYxiRch8hQg/s320/blue.jpg); background-repeat:no-repeat; background-attachment:fixed; }

Atau seperti ini :

body { background:url(http://3.bp.blogspot.com/_NUTOdYaT1os/TEUTzqEt4-I/AAAAAAAABjA/nYxiRch8hQg/s320/blue.jpg) no-repeat fixed; }

 

Nilai Keterangan
scroll Memakai ini atau tidak sama saja.
fixed Ini akan membuat gambar tetap.

 

Penggabungan

Kalau ini supaya lebih efisien tempat, semuanya bisa digabungkan menjadi satu, seperti ini :

body { background:#cccccc url(http://3.bp.blogspot.com/_NUTOdYaT1os/TEUTzqEt4-I/AAAAAAAABjA/nYxiRch8hQg/s320/blue.jpg) no-repeat center top fixed; }

 

 

Jangan cuma baca saja, coba !!!. Bisa anda lakukan di Blogspot anda, Design >> Edit HTML. Jika ingin coba memakai Notepad, seperti ini :

<html> <head> <title>Latihan CSS</title> <style type="text/css"> body { background-color:yellow; } h1 { background-color:#00ff00; } p { background-color:rgb(255,0,255); } </style> </head>  <body> <h1>CSS Background</h1> <p>Mengenal walaupun sedikit tentang kode HTML adalah sebuah keharusan untuk menjadi blogger.</p> <p>Bagaimana seorang Blogger bisa dibilang hebat, kode HTML saja tidak tahu.</p> </body> </html>

Simpan dengan ekstensi file .html atau .htm . Kalau ingin mencoba dari background pertama dan terakhir, Tinggal merubah kode CSS.

 

Alhamdulillah http://nanoyulianto.blogspot.com

Share