Membuat Sticky Fixed Pada Gambar Background Blog? Ternyata Begini Caranya!

Pada kesempatan ini admin 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

DEMO SHOW

Cara membuat sticky/fixed background di Blogger

1. Di Blog Blogger 😃
2. Pilih menu Template ➔ Edit HTML

Template - Edit HTML

3. Cari/temukan kode ini body {

Misalnya kodenya seperti dibawah ini (bisa saja kodenya lain di template blog sobat 😀 ):

body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibb0zTPfLWyiJd7ql0OHh2SVs5JWYRbLqJvwcJ6Q1lUBXDK0l2VyCjax0KMFmSVj6ciFmQP367-ewTNq6EQDKshyphenhyphenD6B-jMSaHKGJGFtbO-lD9WmiSecdUQERJBLTxBeK3k9Iix6cwB_yQ/s1600/399+-+black+kuroshitsuji+sebastian_michaelis+wallpaper.jpg);color:#696969; font-size:13px;font-weight:400;line-height:22px;}

Jika tidak ada gambar background 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 :

body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibb0zTPfLWyiJd7ql0OHh2SVs5JWYRbLqJvwcJ6Q1lUBXDK0l2VyCjax0KMFmSVj6ciFmQP367-ewTNq6EQDKshyphenhyphenD6B-jMSaHKGJGFtbO-lD9WmiSecdUQERJBLTxBeK3k9Iix6cwB_yQ/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.