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

• CSS BOX dan FungsinyaFitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, da ... readmore
• CSS CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampi ... readmore
• CSS DimensiFitur CSS Dimensi berfungsi untuk mengontrol tinggi dan lebar suatu elemen seperti gambar dan paragraf teks. Baik Mengatur tinggi dari suatu elemen dengan menggunak ... readmore
• Cara membuat menu tooltipMenu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link at ... readmore
• Cara membuat gambar melayangCara membuat gambar melayang menggunakan properti float, properti float sangat sering digunakan untuk gambar. Dengan Properti float, sebuah gambar bisa dibuat melay ... readmore