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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiw-Xg4V67ACUY19oRJiRpNzX1OmHaBjDn_Q8EOLyztj0zdC3-4OXgm0QxrqXxuZtlAFYKSrgziDMVHuLJRERJA4bUsVniFRzftquSwLj-b2JEf3WUS9Sd5k_tp6BrHqpTjvhUeLjrcNc/s320/blue.jpg);
}

Atau seperti ini :

body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiw-Xg4V67ACUY19oRJiRpNzX1OmHaBjDn_Q8EOLyztj0zdC3-4OXgm0QxrqXxuZtlAFYKSrgziDMVHuLJRERJA4bUsVniFRzftquSwLj-b2JEf3WUS9Sd5k_tp6BrHqpTjvhUeLjrcNc/s320/blue.jpg);
}

---

Background Repeat

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

body {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv6UZZhnG8BCLrkBbWdJ8IWo80APhOaJV0GVbHM7eaQpb69MPvbVNUP_165sYYauXkzCWQvFLfKRoKbjqpyZyWZd3OHh1vtIAuxv-dvH_2JO9k46I1qL28117naYzrZwV21JEXR1ik2Jtl/);
background-repeat:repeat-x;
}

Atau seperti ini :

body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv6UZZhnG8BCLrkBbWdJ8IWo80APhOaJV0GVbHM7eaQpb69MPvbVNUP_165sYYauXkzCWQvFLfKRoKbjqpyZyWZd3OHh1vtIAuxv-dvH_2JO9k46I1qL28117naYzrZwV21JEXR1ik2Jtl/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv6UZZhnG8BCLrkBbWdJ8IWo80APhOaJV0GVbHM7eaQpb69MPvbVNUP_165sYYauXkzCWQvFLfKRoKbjqpyZyWZd3OHh1vtIAuxv-dvH_2JO9k46I1qL28117naYzrZwV21JEXR1ik2Jtl/);
background-position:center top;
}

Atau seperti ini :

body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv6UZZhnG8BCLrkBbWdJ8IWo80APhOaJV0GVbHM7eaQpb69MPvbVNUP_165sYYauXkzCWQvFLfKRoKbjqpyZyWZd3OHh1vtIAuxv-dvH_2JO9k46I1qL28117naYzrZwV21JEXR1ik2Jtl/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiw-Xg4V67ACUY19oRJiRpNzX1OmHaBjDn_Q8EOLyztj0zdC3-4OXgm0QxrqXxuZtlAFYKSrgziDMVHuLJRERJA4bUsVniFRzftquSwLj-b2JEf3WUS9Sd5k_tp6BrHqpTjvhUeLjrcNc/s320/blue.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}

Atau seperti ini :

body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiw-Xg4V67ACUY19oRJiRpNzX1OmHaBjDn_Q8EOLyztj0zdC3-4OXgm0QxrqXxuZtlAFYKSrgziDMVHuLJRERJA4bUsVniFRzftquSwLj-b2JEf3WUS9Sd5k_tp6BrHqpTjvhUeLjrcNc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiw-Xg4V67ACUY19oRJiRpNzX1OmHaBjDn_Q8EOLyztj0zdC3-4OXgm0QxrqXxuZtlAFYKSrgziDMVHuLJRERJA4bUsVniFRzftquSwLj-b2JEf3WUS9Sd5k_tp6BrHqpTjvhUeLjrcNc/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