membuat Background website dari CSS

Selamat datang di blog Panduan Belajar Website Lengkap . Berikut ini adalah update artikel terbaru mengenai informasi tentang membuat Background website dari CSS silahkan untuk membaca dengan seksama dan mohon untuk disikapi dengan bijaksana mengenai informasi di artikel membuat Background website dari CSS , semoga artikel tentang membuat Background website dari CSS dapat menambah wawasan serta info yang anda cari atau butuhkan.

ni Tips saya dapatkan dari teman blog yang Ilmunya sangat membantu saya dalam membuat background Website

CSS Background

Property backgound dari CSS ini digunakan untuk membuat efek background  pada elemen.
Terdapat beberapa property backgound:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

background-color

Digunakan untuk memberikan warna background pada sebuah elemen.
Contoh:
body {
background-color:“blue”;
}
Property background-color ini bisa kita beri nilai dengan :

• Nama warna seperti “red”, “blue”, “white”.
• Nilai RGB seperti “rgb(255,0,0)”.
• Nilai Hexadesimal seperti “#ffffff”.

background-image

Digunakan untuk memberikan beckground gambar pada sebuah elemen.
Defaultnya-> gambar diulang-ulang secara horizontal dan vertikal sehingga dia memenuhi seluruh elemen.
Contoh:
body {
background-image:url(‘fahmi.png’);
}

Pengulangan Gambar

Background-image ini mempunyai dua bentuk pengulangan, yaitu:

• repeat-x yaitu pengulangan secara horizontal.
• repeat-y yaitu pengulangan secara vertikal.

Contoh:
Pengulangan secara horizontal:
body {
background-image:url(‘fahmi.png’);
background-repeat:repeat-x;
}
Keterangan:
Jadi untuk membuat pengulangan gambar kita membutuhkan property background-repeat.
Muncul Pertanyaan:
Jika saya tidak ingin mengulang image backgroundnya gimana … ?
Jawaban:
Kamu bisa memberi nilai pada property background-repeat dengan ‘no-repeat‘ seperti kode dibawah ini:
background-repeat:no-repeat;

background-attachment

Digunakan saat halaman web di scroll maka terdapat dua pilihan:

• fixed yaitu backgroundnya tetap walaupun user men-scroll halaman web.
  
• scroll yaitu background ikut terscroll ketika user mens-scroll halaman web.

Cara menggunakannya adalah seperti ini:
background-attachment:fixed;
background-attachment:scroll;
Jika tidak didefinisikan maka nilai defaultnya dari background-attachment adalah scroll.

Mengatur Posisi Background

Untuk mengatur letak background gambar maka CSS menyediakan property background-position.
Contoh:
Untuk Meletakkan posisi background gambar ditengah maka kamu bisa gunakan kode dibawah ini:
background-position:center;
Terdapat tiga pendefinisian nilai untuk property background-position yaitu:

• panjang yaitu dengan menggunakan angka disertai satuan pixel misal 20px 10px.
  
• Persentasi yaitu dengan menggunakan angka diikuti tanda persen misal 10% 20%.
  
• Keyword yaitu dengan menggunakan kata-kata misal top center.

Contoh:
Property background-position dengan menggunakan pixel:
background-position:20px 10px;
Keterangan:

• 20px adalah posisi horizontal
• 10px adalah posisi vertikal

Jadi nilai pertama adalah untuk posisi horizontal sedangkan nilai kedua untuk posisi vertikal.

Read more →

Kolom Posting dg Background Transparan

Untuk menciptakan dinamisasi halaman blog, mungkin kolom/boks transparan bisa menjadi salah satu alternatif. Boks dengan effek transparansi mempunyai sebuah background image yang tertutup oleh background color transparan hingga background image tetap terlihat secara samar-samar. Anda bisa memanfaatkan boks dengan background-nya sebagai boks posting. Akan lebih cantik jika setiap materi posting disesuaikan dengan background image yang digunakan. Sebagai contoh saat anda menuliskan sebuah artikel tentang mobil maka yang ditampilkan sebagai background dengan effek transparansi adalah sebuah gambar mobil atau sesuatu yang berkaitan dengan artikel tersebut.

Kode CSS :

#GRkolomku{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSkn-dcVTO6MG-V_P1XrK57ebb6X-U_MiWywc75VbHQZ2T9XnvmMbPYLhk8nBCym-d_PH5eE2LlQEnY8G31Zm9txnopawB5SG3xBfd2f9TEdYu9dIaNMscPWB0GwMsQfbWFaG3y0tzciI/);
        background-position:top center; /* posisi background horizontal-vertical */
        background-repeat:repeat-y;  /* berulang secara vertikal */
        background-size:100% auto;  /* mengatur ukuran background */
        position:relative; 
        width:100%;
        margin:-10px;  /* dapat disusuaikan dengan halaman posting */
        padding:10px;  /* dapat disusuaikan dengan halaman posting */
}
.GRoverlayku{
        position:absolute;
        top:0; 
        left:0;
        height:100%;
        width:100%;
        background:#000;  /* sesuaikan background color dengan warna teks */
        opacity:0.5;
        filter:alpha(opacity=50);
}
.GRartikelku{
        position:relative; 
        color:#eee;  /* sesuaikan warna teks dengan background-color */
}

xHTML :

<div id="GRkolomku">
<div class="GRoverlayku"></div>
<div  class="GRartikelku">
Letakkan Artikel di sini!
</div>
</div>

Cara Membuat :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Klik "Simpan Template (Save Template)".
8. Buat posting dengan xHTML di atas kemudian buka blog untuk melihat hasilnya.

Catatan/Keterangan :

1. Sebagian keterangan sudah tertulis dalam kode CSS.
2. Jika menggunakan background image dengan ukuran kecil, rubah :
   - background-size:100% auto; menjadi » background-size:(image-width)px auto;
   - background-repeat:repeat-y; menjadi » background-repeat:repeat;
   - Selain dengan cara di atas, dapat juga dilakukan dengan menghapus:
   - background-position:top center;, background-size:100% auto; dan background-repeat:repeat-y;
3. Warna background dan warna teks dapat diganti dengan merubah :
   - background-color:#000;
   - color:#eee;

Read more →