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/AVvXsEiapFW0LIrSN4U0tKd5l5qS-PeOszMO3NLQwhVU97iejGD_nbbHzxJHQtL4loQMSwwOQ0d1KvaQQZlKsKebUEK5QoEAIuKSEcaQPA5fmQ4i2b2DXtwZKChaazASu76v4lCQ4HsKMEjLLr23/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/AVvXsEhvKEFku_u3-ZWCkh9vmUqcB8Pi19eAwz77KzHLuMuhmVC8jXu6lTb3FUbtKWLpzrCoX02kyYMqTV044Jg2igg6ksAF8YqBuEc5u42EGzha15uk8GflD35YNZ4nlSADrTimNPYNFMJMhF3x/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/AVvXsEiex475h3B-z59xAXxfJPpbiCxWl45nOplzP3KSzLOxntr-6Vp2-axrGk51A4OFi6RSOpEoc6SFtYlByNrn7sgVHbrzw8uSBIyDBOBVciX7uJ8I8b3IVGlKV_eAZyXGcLXCJhvsG36wWRtt/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.

Judul: CSS Background; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara buat menu drop down bubbleKoleksi baru lagi cara buat menu drop down, dan menu ini memiliki tampilan yang berbeda dengan menu drop down yang lain. Menu drop down ini mengunakan efek bubble y ... readmore
• CSS3 TransisiSetelah yang lalu kita belajar tentang Transformasi 2D, kemudian agar lebih menarik kita tambahkan dengan efek transisi. Dengan CSS3 transisi, kita dapat menambahka ... readmore
• CSS Gradient background GeneratorPada posting sebelumnya saya membahas tenntang CSS3 Generator, dan kali ini saya akan membahas tentang CSS Gradient Background Generator (Warna Gradient) yaitu sebu ... readmore
• Cara membuat textarea dengan tombol "select all"Belajar kali ini adalah bagaimana kita menggunakan Javascript dan Css untuk menambahkan tombol "select all" pada textarea. Sehingga pengunjung lebih mudah untuk men ... readmore
• Cara membuat efek shadow pada kotak dan gambar Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi ... readmore