CSS BACKGROUND IMAGE

CSS BACKGROUND IMAGE – Tutorial kali ini akan membahas bagaimana cara memasukan image menjadi background sebuah tampilan website. Image ini bisa dipasang sebagai latar belakang tampilan sebuah website, bisa juga hanya sebagai background style div sidebar atau mainbar.

css background image
css background image

Bagi yang sudah mahir memang hal ini sangatlah mudah dan mungkin sudah diluar kepala. Namun bagi yang belum tahu sama sekali tentang css bisa jadi mereka kebingungan bagaimana cara mengganti background blognya sendiri. Memang tutorial ini ditujukan kepada para pemula dan ingin mengerti lebih jauh tentang css. Para pemula yang ingin mengerti dasar-dasar css dan tidak hanya memanfaatkan fitur blogspot atau wordpress yang sekarang sudah serba otomatis.

CARA MENGGANTI BACKGROUND IMAGE

Berikut ini langkah-langkah cara mengganti background image sebuah tampilan:

1. Siapkan gambar yang akan dibuat background

Hal yang pertama harus dilakukan adalah meng-upload gambar yang akan dijadikan sebagai background, atau sobat blogger bisa mencarinya di mesin pencarian google kemudian copy link image tersebut.
Dan gambar yang akan di jadikan sebagai backgroud adalah sebagai berikut:
background image
background image

2. Gunakan Kode CSS Background

Langkah selanjutnya adalah menggunakan kode css background sebagai berikut ini :
.gambar {
background: url(http://www.inblogspot.com/wp-content/uploads/2012/11/How_to_Add_background_image_using_CSS-300x210.jpg);
border: 3px solid #FF7A00;
 height: 150;
margin: 30;
padding: 50px 10px 0 20px;
width: 280;
}
Pada tulisan yang berwarna merah adalah div atau body yang ingin diganti backgroundnya tinggal search aja menggunakan fasilitas search pada browser. Kemudian bagian yang berwarna biru adalah url gambar yang ingin dijadikan sebagai background image. Anda bisa mengganti gambar ini dengan gambar apa saja terpenting adalah anda telah meng-copy url image yang telah diupload oleh anda kemudian gantikan url yang berwarna biru diatas dengan url background yang diinginkan.
Berikut ini adalah div style yang sudah diganti backgroundnya

cara mengganti background
before

css background image
after

Bagaimana mudah bukan cara mengganti CSS BACKGROUND IMAGE diatas ? Selamat mencoba sobat blogger. Salam Blogger

Leave a Reply

Your email address will not be published. Required fields are marked *

No Live Link Please! and Leave a Relevant Comment