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/AVvXsEh7pHugCVxzbIK086yzI26d6CyX3axQBGUWU6qWZDdwTONV-LPLdrqKCUQLBUA8F7gq5u_Wh3z29v7k1AMMv1MGeQxLfBFb6FXNF4y_xX8CxOAKG_a7O2_4IWKHU_T4KC_pvdYObaNIT_Xf/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/AVvXsEh9DU8n2wbbjnpYM59Cu7Cd1330xtGY3iSF0CtmhKol3yxtgZENdZIxJuMBKsjO3mGbBrSftcmPdNwsnsWr9eSIVePpIHhAWbwUd6kH_S-gtizxJSNvp9iEBOCws-SqxcBzzXoh7vS-VLZW/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 :

 4. Mengatur posisi Latar belakang gambar
Dengan properti css ini kita bisa membuat artikel dengan memberikan efek latar belakang gambar yang bisa kita atur posisi penempatan gambar baik di sebelah kiri atau disebelah kanan, dan kita bisa menempatkan artikel atau posting dalam sebuah kotak yang ada disebelah gambar.

<style type="text/css">
div.background
{
margin-left:20px;
background:#ffffff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM4OsQUddHX0HLgkA4ebkcWqMlH9qg1UcAyYR7wbUWOdKdWLrkRsvdruyVNv5FnLfa8Jou4ifFobLUYpMQht18RAo93dc_Fd34qw_YVeYGb8CoUBcmxxGQWcvgsSJBYWMEn_LTh8gIx0Bk/s200/kupu.jpg') no-repeat top left;
}
div.container
{
text-align:center;
}
div.center_div
{
border-style:solid;
border-color:#E6E6E6;
margin-left:200px;
margin-right:auto;
width:50%;
background-color:#E0E0B8;
text-align:left;
padding:10px;
}
</style>

<div class="background">
<div class="container">
<div class="center_div">
<h2>JUDUL TEKS</h2>
Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar yang bisa kita atur posisi penempatan gambar baik di sebelah kiri atau disebelah kanan, dan kita bisa menempatkan artikel atau posting dalam sebuah kotak
</div>
</div>
</div>

Berikut hasilnya :

JUDUL TEKS

Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar yang bisa kita atur posisi penempatan gambar baik di sebelah kiri atau disebelah kanan, dan kita bisa menempatkan artikel atau posting dalam sebuah kotak

Catatan :

• Ganti Ulr image berwarna biru dengan Ulr tempat anda menyimpan gambar, dan tulisan berwarna merah adalah nilai ukuran besar dan kecilnya gambar.
•  nilai width:40% adalah lebar dari kotak

Silahkan anda bisa coba otak atik sesuai selera anda.

Ok...., Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Anda sedang membaca artikel tentang CSS Background dan anda bisa menemukan artikel CSS Background ini dengan url http://wanzbsc.blogspot.com/2011/12/css-background.html. Anda boleh menyebarluaskan atau mengcopy artikel CSS Background ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.