Background Scrollind Effect code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Background Scrollind Effect</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <section class="sec1"></section> <section class="sec2"></section> <section class="sec3"></section> <section class="sec4"></section> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } section { position: relative; width: 100%; height: 650px; } .sec1 { background: url(image1.jpg); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } .sec2 { background: url(image2.jpg); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } .sec3 { background: url(image3.jpg); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } .sec4 { background: url(image4.jpg); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; }
