How To Make Background Stay When Scrolling

A lot of dynamic effects can be given in web projects using but CSS. 1 such outcome is keeping background fixed as foreground moves on scrolling. It tin can be achieved using a single CSS property -background-zipper.

Look at the post-obit demo in which the backgrounds of different sections of a web page are fixed while their contents move on scrolling.

fixed background scrolling

The code to create the effect shown in the demo is explained below in steps.

The Structure

The HTML consists of v sections. The first, third and fifth sections are given images every bit background that do not scroll when their contents scroll, and the 2nd and fourth sections are given background colors. All these sections are wrapped inside adiv.

HTML

                        <div            form=            "wrapper"            >            <!-- wrapper div starts -->            <div            class=            "fixed-bg bg-i"            >            <h1>Fixed Background scrolling</h1>            </div>            <div            class=            "scroll-bg"            >            <h3>Lorem ipsum dolor sit down amet, consectetur adipiscing elit. Donec in dolor tempor, posuere mi id, eleifend magna. Nulla at lectus magna. Etiam sodales arcu at lectus porttitor accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur id urna dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin et pharetra justo, quis suscipit risus. Maecenas tincidunt efficitur ex in pharetra.</h3>            </div>            <div            class=            "fixed-bg bg-ii"            >            <h1>Fixed Background scrolling</h1>            </div>            <div            course=            "scroll-bg"            >            <h3>Lorem ipsum dolor sit down amet, consectetur adipiscing elit. Donec in dolor tempor, posuere mi id, eleifend magna. Nulla at lectus magna.</h3>            </div>            <div            grade=            "fixed-bg bg-3"            >            <h1>Fixed Background scrolling</h1>            </div>            </div>            <!-- wrapper div ends-->

The Styling

Stride 1

In the demo, I wanted the acme of the starting time, third and fifth sections aforementioned equally the height of the viewport. For this,height: 100% is given to the three sections and all their ancestors (.fixed-bg -> .wrapper -> trunk -> html).

CSS

                        html            ,            body            {            pinnacle            :            100            %            ;            }            .            wrapper            {            top            :            100            %            ;            }            .            stock-still-bg            {            tiptop            :            100            %            ;            }

If yous give a fixed height to these three sections, then there is no need to give elevation to their ancestors.

Step ii

Background images are given to the first, tertiary and fifth sections and background color to the remaining 2 sections.

The background images are given the respectivebackground backdrop to make them not repeatable, cover the background expanse and positioned at the center. Givingbackground-zipper: fixed prevents them from scrolling with the content. This is the key step for our scrolling issue.

CSS

                        .            fixed-bg            {            groundwork-attachment            :            stock-still            ;            background-repeat            :            no-repeat            ;            background-size            :            encompass            ;            groundwork-position            :            center            centre            ;            }            .            coil-bg            {            background-colour            :            #0f0f0a            ;            }            /* commencement section */            .            bg-1            {            groundwork-epitome            :            url            (            '../bg1.jpg'            );            }            /* third section */            .            bg-2            {            background-epitome            :            url            (            '../bg2.jpg'            );            }            /* 5th section */            .            bg-three            {            background-prototype            :            url            (            '../bg3.jpg'            );            }

Step 3

The last step is styling the content of the v sections.

The font blazon, space between lines of text, letter spacing and word spacing are specified by using thefont-family,line-height,give-and-take-spacing andletter-spacing backdrop for the wrapperdiv.

CSS

                        @            import            url            (            'https://fonts.googleapis.com/css?family=Quicksand'            )            ;            .            wrapper            {            font-family            :            'Quicksand'            ,            sans-serif            ;            line-meridian            :            ane.5            ;            discussion-spacing            :            4            px            ;            letter of the alphabet-spacing            :            1            px            ;            }            .            fixed-bg            {            colour            :            white            ;            }            .            scroll-bg            {            padding            :            ten            px            70            px            ;            color            :            #676767            ;            }

The contents of the first, third and fifth sections are center aligned horizontally using thetext-align holding and vertically using thevertical-align anddisplay backdrop.

CSS

                        .            fixed-bg            {            width            :            100            %            ;            text-marshal            :            center            ;            display            :            table            ;            }            .            fixed-bg            h1            {            brandish            :            table-jail cell            ;            vertical-align            :            eye            ;            }

Conclusion

Backgrounds have e'er been an indispensable part of spider web pages. Any spider web page tin exist fabricated more lively by doing merely a slight change in the way its background appears. For example, you can give a video as background or can employ diverse furnishings and animations to information technology. Autonomously from making the background fixed equally shown in this post, you can give lots ofparallax effects in your spider web pages which make the background gyre at a slower speed equally compared to its content. Come upwardly with your own ideas on applying this effect.