Design Product Page with CSS Background Attachments

Rakhitha Nimesh is going to show you how to create a product page for your website with awesome CSS effects. He will be using CSS background attachments and jQuery to create these effects. There are 2 commonly used techniques using this effect. First method is creating the before and after effect of an image. He is going to create the second method which will change the product’ as he scrolls down.

First you need to add a background image to a HTML container. Then background-attachment property defines whether to scroll the image with the content or keep it fixed. You can use either fixed or scroll as the value of the background-attachment property. In this tutorial Rakhitha Nimesh will be discussing about fixed background attachments. Lets say you have 4 containers with fixed background attachments at the same position. In such cases images will stack on top of the next one and the content will aligned vertically like they normally do.