CSS background image untuk membuat gallery Scroll Horizontal
Home » Berita Hari Ini » Design Website » CSS background image untuk membuat gallery Scroll Horizontal

CSS background image untuk membuat gallery Scroll Horizontal

Css Background image adalah salah satu design yang kini sering menjadi sorotan para pengguna, Memang penggunaan Image pada background mengurangi kecepatan suatu halaman, alternatifnya adalah dengan mengompress image tersebut atau menggunakan gambar polos sehingga sangat ringan.

Pemilihan image sangat penting dan perlu pengamatan lebih lanjut, terutama pada ukuran. Praktik terbaik apabila tujuanya untuk template maka ukuran yang baik adalah kurang dari 20kb dan ini akan sangat berguna untuk memaksimalkan SEO Of Page pada halaman anda.

Cara membuat CSS Background image ini sebenarnya sangat mudah bahkan siapapun bisa memahami secara menyeluruh, Tidak memerlukan Java Script atau PHP, Cukup dengan HTML dan CSS saja maka anda sudah mendapatkan design website atau halaman seperti yang kalian harapkan.

Pada praktek kali ini saya menerapkan class box dan grup id galeri sehingga penulisanya menjadi .box dan #galeri dan sedangkan pemanggil background image adalah image:url sehingga kode lengkapnya adalah sebagai berikut.

<style>/**Galeri by disqusweb.com**/.box{background-image:url(<style>/**Galeri by disqusweb.com**/.box{background-image:url(https://1.bp.blogspot.com/-0mVfySRqm3Q/X1JR_Z9D1eI/AAAAAAAAF0I/N6p2lV3dC5AtI3yqg4vGAxxFBiB8QnDTwCPcBGAYYCw/s1197/modifikasi-vario-150.webp);width:100%;padding-top:5px;box-shadow:5px;padding-bottom:17px; 5px;overflow: auto;white-space: nowrap;}.img{width:300px;height:200px;box-shadow:4px 8px #000;}#galeri ul {margin:0;padding:0px;list-style:none;}#galeri li {display:inline;margin:5;
}</style>);width:100%;padding-top:5px;box-shadow:5px;padding-bottom:17px; 5px;overflow: auto;white-space: nowrap;}.img{width:300px;height:200px;box-shadow:4px 8px #000;}#galeri ul {margin:0;padding:0px;list-style:none;}#galeri li {display:inline;margin:5;
}</style>

Coba perhatikan alamat gambar “https://1.bp.blogspot.com/-0mVfySRqm3Q/X1JR_Z9D1eI/AAAAAAAAF0I/N6p2lV3dC5AtI3yqg4vGAxxFBiB8QnDTwCPcBGAYYCw/s1197/modifikasi-vario-150.webp”, Silahkan ganti dengan gambar sesuai keinginan dan rekomendasi kami sebelumnya “Gunakan gambar dengan ukuran maksimal 20kb”.

Agar css background image dapat bekerja maka langkah selanjutnya adalah menambahkan HTML pemanggil class pada css tersebut yaitu class .box dan #galeri, sedangkan untuk membuat gambar sejajar kami memanfaatkan HTML Item list ul li sehingga kodenya adalah

<div class="box">
<div id="galeri"><ul><li><img class="img"alt="modifikasi vario 150" src="https://1.bp.blogspot.com/-Uw0r6HW_Tds/X1JSJN2snVI/AAAAAAAAF0E/6u05msDwmo8dhisovQpxf0jmGYuGBWUHACLcBGAsYHQ/s1193/modifikasi-vario-150-terbaru.webp" title="modifikasi vario 150" width="80%" /></li><li>
<img class="img"alt="modifikasi vario 150" src="https://1.bp.blogspot.com/-P8WgrNnLifg/X1JSRKMdSlI/AAAAAAAAF0M/r85OUIDD-TgsP2xuM_5dqO3DaNu39jY8wCLcBGAsYHQ/s1200/modifikasi-vario-150-01.webp" title="modifikasi vario 150" width="80%" /></li><li>
<img class="img"alt="modifikasi vario 150" src="https://1.bp.blogspot.com/-0mVfySRqm3Q/X1JR_Z9D1eI/AAAAAAAAF0I/N6p2lV3dC5AtI3yqg4vGAxxFBiB8QnDTwCPcBGAYYCw/s1197/modifikasi-vario-150.webp" title="modifikasi vario 150" width="80%" /></li></ul></div></div>

Bagaimana cara agar slot foto atau gambar untuk galery terdiri lebih dari 3 foto atau slot? Cukup dengan menambahkan HTML image class ‘img’ sehingga penulisanya adalah sebagai berikut

<li><img class="img"alt="modifikasi vario 150" src="Alamat gambar" title="modifikasi vario 150" width="80%" /></div></li></div>

Silahkan tambahkan HTML seperti diatas tepat diakhir HTML Item list sehingga jadinya akan menjadi kece, hehe ….. Tertarik ingin menggunakan CSS Backgrund image scroll horizontal? silahkan Copy seluruh kode script dibawah ini dan ubah alamat gambar sesuai gambar yang kalian punya.

<style>/**CSS Background Image Scrol Horizontal by disqusweb.com**/.box{background-image:url(https://1.bp.blogspot.com/-0mVfySRqm3Q/X1JR_Z9D1eI/AAAAAAAAF0I/N6p2lV3dC5AtI3yqg4vGAxxFBiB8QnDTwCPcBGAYYCw/s1197/modifikasi-vario-150.webp);width:100%;padding-top:5px;box-shadow:5px;padding-bottom:17px; 5px;overflow: auto;white-space: nowrap;}.img{width:300px;height:200px;box-shadow:4px 8px #000;}#galeri ul {margin:0;padding:0px;list-style:none;}#galeri li {display:inline;margin:5;
}</style>

HTML Background Image Scrol Horizontal
<div class="box">
<div id="galeri"><ul><li><img class="img"alt="modifikasi vario 150" src="https://1.bp.blogspot.com/-Uw0r6HW_Tds/X1JSJN2snVI/AAAAAAAAF0E/6u05msDwmo8dhisovQpxf0jmGYuGBWUHACLcBGAsYHQ/s1193/modifikasi-vario-150-terbaru.webp" title="modifikasi vario 150" width="80%" /></li><li>
<img class="img"alt="modifikasi vario 150" src="https://1.bp.blogspot.com/-P8WgrNnLifg/X1JSRKMdSlI/AAAAAAAAF0M/r85OUIDD-TgsP2xuM_5dqO3DaNu39jY8wCLcBGAsYHQ/s1200/modifikasi-vario-150-01.webp" title="modifikasi vario 150" width="80%" /></li><li>
<img class="img"alt="modifikasi vario 150" src="https://1.bp.blogspot.com/-0mVfySRqm3Q/X1JR_Z9D1eI/AAAAAAAAF0I/N6p2lV3dC5AtI3yqg4vGAxxFBiB8QnDTwCPcBGAYYCw/s1197/modifikasi-vario-150.webp" title="modifikasi vario 150" width="80%" /></li></ul></div></div>

Berikut ini adalah hasil penerapan dari kode yang sudah kami jelaskan diatas ….

  • modifikasi vario 150
  • modifikasi vario 150
  • modifikasi vario 150
Tentang penulis : Aceng Gimbal
Sosok antusias dengan dunia Blogging untuk mengejar perubahan.

19 komentar untuk “CSS background image untuk membuat gallery Scroll Horizontal”

  1. Hello! I could have sworn I’ve been to this blog before but after browsing through some of the post I realized it’s new to me. Anyways, I’m definitely happy I found it and I’ll be book-marking and checking back frequently!

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *