Cara membuat sticky / fixed pada gambar background Blog

HaiSob apa kabar lagi? semoga semua dalam keadaan sehat. Ok sob pada kesempatan ini saya akan membagikan tutorial cara membuat sticky / fixed pada gambar background Blog. Maksud saya disini adalah membuat background diam atau melekat atau menempel walaupun halaman di scroll kebawah atau pun keatas.

Trik ini sederhana saja hanya dengan menambahkan sedikit kode di CSS blog. nah untuk lebih jelasnya lagi bagaimana contohnya silahkan sobat menuju ke halaman Demo dibawah ini kemudian Perhatikan backgroundnya, silahkan scroll ke atas dan kebawah dan lihat backgroundnya tidak bergerak.

Fixed Background Images


Cara membuat sticky / fixed pada gambar background Blog
Fixed Background



Cara membuat sticky/fixed background di Blogger


1. Di Blog Blogger 😃
2. Pilih menu Template ➔ Edit HTML
Cara membuat sticky / fixed pada gambar background Blog
Template - Edit HTML

Baca juga: cara membuat pulse loading animation

3. Cari/temukan kode ini body {

Misalnya kodenya seperti dibawah ini (bisa saja kodenya lain di template blog sobat 😀 ):
body{background:url(http://3.bp.blogspot.com/--WfQf1HuAg8/UAITonwFadI/AAAAAAAAAVo/57QHFEmhHF0/s1600/399+-+black+kuroshitsuji+sebastian_michaelis+wallpaper.jpg);color:#696969; font-size:13px;font-weight:400;line-height:22px;}
Jika tidak ada gambar backgroundnya sobat bisa tambakan saja sendri, tambahkan background gambar pada kodenya, seperti kode wana hijau diatas.

4. Selanjutnya Tambahkan saja kode ini ke dalamnya:
background-position: center; background-size:100%; background-repeat: no-repeat; background-attachment: fixed;
5. Contohnya hasilnya adalah seperti dibawah ini :

Baca juga: Cara mengetahui nilai DA dan PA suatu Blog
body{background:url(http://3.bp.blogspot.com/--WfQf1HuAg8/UAITonwFadI/AAAAAAAAAVo/57QHFEmhHF0/s1600/399+-+black+kuroshitsuji+sebastian_michaelis+wallpaper.jpg);background-position: center; 
background-size:100%; background-repeat: no-repeat; background-attachment: fixed;color:#696969; font-size:13px;font-weight:400;line-height:22px;}
6. Warna biru diatas adalah url gambar background, ganti dengan url gambar yang kamu inginkan.
7. Save.

Ok sekian mengenai cara membuat background  sticky / fixed, background tidak bergerak saat di scroll, semoga bermanfaat.
Join This Site