CSS Background

Fitur dari css Background berfungsi untuk memberi efek latar belakang suatu elemen. Beberapa properti dan kelebihan dari fitur ini diantaranya kita bisa memberi efek latar belakang seperti; Latar belakang warna, Latar belakang gambar, mengulang Latar belakang gambar secara vertikal maupun horisontal, Mengatur posisi Latar belakang gambar.
Dengan fitur css ini, kita bisa gunakan untuk membuat sebuah web atau sekedar untuk memberi efek Background pada postingan artikel pada blog.

OK..., mari kita lihat contohnya satu-persatu :

1. Latar belakang warna

<style type="text/css">
div.background-warna
{
border-style:solid;
border-color:#E6E6E6;
margin-left:auto;
margin-right:auto;
width:80%;
background-color:#E0E0B8;
text-align:left;
padding:10px;
}
</style>
<div class="background-warna">
<h2>JUDUL TEKS</h2>
Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang warna
</div>

Berikut hasilnya :

JUDUL TEKS

Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang warna

2. Latar belakang gambar

<style type="text/css">
div.background-gambar
{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-iWZoRA5nVLmni8AFPHVMcCnXO1JjoETlvZuC3L44YCD0_kaQGobM4DyFv827JWjFb-dyIs-w2e1ewrDxH-zFNwC5LmZPcsOLipoZuBdKODe2FMl4MFgfbCjd6B7N7efrmhF_3Af3mOVx/s1000/kertas.jpg');
text-align:left;
padding:10px;
}
</style>

<div class="background-gambar"><h1>JUDUL TEKS</h1>
Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar
</div>

3. Mengulang Latar belakang gambar secara horisontal

<style type="text/css">
div.background-gambar-repeat-x
{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2xb9OCfPTNk4jsGnDT-J57xq-L33DGRmKdE_9vKzU1IJBaqz1xzCzE1u9WPooipiSdhCS4jhseOfODUMg5oHQIvbxDmWsbb2nNUQZL-r3X99MVdYX7_dyOP3PYiH8gVKE3QmDY-Wq1a90/s200/Background%2Bgambar.jpg');
background-repeat:repeat-x;
text-align:left;
padding:10px;
}
</style>

<div class="background-gambar-repeat-x">

<h1>JUDUL TEKS</h1>

Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar yang diulang secara horisontal </div>

Berikut hasilnya :