Styles: Background Scrolls

(now including parallax)

CSS STYLES ☰

You can set background images to 'fixed' or "scroll" Fixed will lock it to the page background.
Default- images scroll with the page.
The following are some parallax options.
SPECIAL CODE REQUIRED IN THE <HEAD> SECTION! MAKE SURE TO SEE THE CODE AT THE BOTTOM OF THIS PAGE.

 

dye_img-BG5 + dye_img-SCROLL

Full scroll, background follows container at same rate
"dye_img-SCROLL" can be used anywhere.

 

dye_img-BG5 + dye_img-BGSCROLL-FAST

Background scrolls fast but slower than container.
"dye_img-BGSCROLL-FAST" only works on page sections.
 

dye_img-BG5 + dye_img-BGSCROLL-MEDIUM

Background scrolls at about half the container speed.
"dye_img-BGSCROLL-MEDIUM" only works on page sections.
 

dye_img-BG5 + dye_img-BGSCROLL-SLOW

Background scrolls much slower than container.
"dye_img-BGSCROLL-SLOW" only works on page sections.
 

dye_img-BG5 + dye_img-FIXED

Background fixed to screen.
"dye_img-FIXED" can be used anywhere.
 

dye_img-BG5 + dye_img-BGSCROLL-REV

Background scrolls in a direction reversed from container.
"dye_img-BGSCROLL-REV" only works on page sections.
 


scroll code

To add "parallax scroll" to your page, place the following code in the <head> section of that page.
    <!-- ***required for slow scrolling*** -->
    <script src="http://sitedyes.com/_js/slowscroll.js">
    </script>
    <style>
    section.dye_img-BGSCROLL-SLOW,section.dye_img-BGSCROLL-FAST,section.dye_img-BGSCROLL-MEDIUM {
     
    background: center 0 no-repeat fixed;
    height: auto;
    position: relative;
    }   
    section.dye_img-BGSCROLL-REV {
     
    background: center bottom no-repeat fixed;
    height: auto;
    position: relative;
    }   
    </style>
    <!-- ***/required for slow scrolling*** -->












© SiteDyes.com 2018
Web colors by SiteDyes.com