Parallax is an effect used in various websites to make webpages attractive. In this effect, as we scroll, the background of the webpages moves at a different speed than the foreground making it look beautiful to the eyes. This effect can be easily implemented with the help of CSS.
Implementation of the effect using CSS
1. background-attachment
This property is used to determine whether a background image is fixed or scroll with the page.
Syntax : background-attachment: scroll/fixed/local;
2. background-position
This property determines the starting position of the background image.
Syntax : background-position: value;
3. background-repeat
This property determines whether a background image will repeat or not and if repeated , how will it be repeated.
Syntax : background-repeat: repeat/repeat-x/repeat-y/no-repeat;
repeat – The background image will be repeated both vertically and horizontally.
repeat-x – The background image will be repeated only horizontally.
repeat-y – The background image will be repeated only vertically.
no-repeat – The background-image will not be repeated.
4. background-size
This property determines the size of the background image.
Syntax : background-size: auto/length/cover/contain/;
auto – Default value.
length – Sets the width and height of the background image.
percentage – Sets the width and height of the background image in percent of the container element.
cover – Scale the background image to be as large as possible so that the background area is completely covered by the background image.
contain – Scale the image to the largest size such that both its width and its height can fit inside the content area.