Membuat Efek Background Scrolling dengan CSS

12/06/2014    Rully Febrian    1705     Website

Hallo teman-teman apa kabar, pada artikel ini kita akan membuat sebuah efek background yang menarik dengan menggunakan CSS. Selain untuk halaman website teknik ini juga bisa digunakan untuk halaman presentasi atau untuk deskripsi produk. Untuk membuatnya teman-teman hanya mengatur elemen dengan memberikan padding di suatu sisi sekitar 50% sehingga mendorong konten kesisi lain  dan mengatur background yang lebarnya sekitar 50% yang posisinya berlawan dengan konten. Setelah itu teman-teman mengatur background-attachment menjadi fixed. Untuk lebih jelas silahkan teman-teman membuat layout HTMLnya seperti dibawah ini:

 

Membuat-Efek-Background-Scrolling-dengan-CSS

Membuat-Efek-Background-Scrolling-dengan-CSS

 

Simpan kode diatas dan coba buat illustration_03 dan illustration_04 dengan konten yang sama. Buatlah style.css seperti berikut:

Membuat-Efek-Background-Scrolling-dengan-CSS

 

Untuk download hasilnya silahkan teman-teman klik disini.

Membuat-Efek-Background-Scrolling-dengan-CSS

 

Demikian tutorial ini semoga bermanfaat dan menambah pengetahuan teman-teman dalam menguasai CSS. Terimakasih

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More