Buy me a coffee. Thanks!

In this tutorial we will try to recreate the scrolling effect you’ve seen on the new e-bay site. We’ll create a simple responsive one-page site presenting the beauty and benefits of lavender. No javascript needed – we will use only css.

Step 1 – Prerequisities

We will need 3 background images, that will stretch to full page width. Mine are about 1800px x 1200px.

Step 2 – Html

The markup is simple. The content of each part is wrapped in a div with a class “wrapper” which is contained within a section or the header (for the introductory part).

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper"> <h1>From love for lavender</h1> <p><span>Lavender</span> (botanic name Lavandula) is a .... </p> </div> </header> <section class="content" id="oil"> <div class="wrapper"> <p><span>Lavender oil</span> is an ... </p> </div> </section> ... <footer> <div class=wrapper> "From love for lavender" has been built ... </div> </footer> </body> </html>

Step 3 – basic css

The wrapper class is defined as follows. The box-sizing property allows to alter the default CSS box model, i.e. content-box model, where the width and height properties are measured including only the content. If we set box-sizing to border box, the width and height include the padding and border.

.wrapper { width: 100%; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Since we want each section and the header to behave responsively, we’ll use only percent units. For example : the background image for the first section in 500px width, which represents 500px/1200px x 100% = 41.66667%

#oil .wrapper { background: url(../images/lavender2.jpg) 4.16667% center no-repeat; padding: 10% 4.16667% 10% 50%; background-size: 41.66667% auto;}

The value of 4.16667% corresponds to 50px when the wrapper has its maximum width.

We’ll treat the case of larger monitors with a media query :

@media only screen and (min-width: 1200px) { .wrapper { width:1200px; } ........ #oil .wrapper { padding: 120px 50px 120px 600px; }

You’ll find the complete stylesheet in the download files.

Step 4 – the scrolling effect

We don’t use any Javascript, our scrolling effect is obtained purely with css. We don’t want any additional markup, so we will use the :after pseudo-elements. They’ll be positioned below each section and covered with the background image. We will set the background-attachment property to fixed. We’ll also add sole inner shadow to give the illusion of depth :

section:after, header:after { content: ""; display: block; height: 400px; width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); }

We just have to assign the background image to each section

header:after { background-image: url(../images/lavenderbg1.jpg); } #oil:after { background-image: url(../images/lavenderbg2.jpg); } #culinary:after { background-image: url(../images/lavenderbg3.jpg); } #dried:after { background-image: url(../images/lavenderbg4.jpg); }

Step 5 – last tweaks

Since background-attachment:fixed is not supported in mobile Safari we’ll add the following media-query

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (min-device-width: 320px) and (max-device-width: 480px) { section:after, header:after { background-attachment: scroll; } }

We will also scale down the font-size for smaller monitors

@media only screen and (max-width: 600px) { body { font-size: .75em; } }

And that’s it! I hope you’ll find this technique useful, don’t hesitate to go further – this tutorial is just an inspiration. Looking forward to your comments. Thanks.

Terms of use :

You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.