» » Fixed background and scrolling page effect with CSS

 

Fixed background and scrolling page effect with CSS

Author: bamboo06 on 13-08-2016, 01:54, views: 2892

7
How to create a just simply and none requiring javascript and CSS property of background-attachment can be realized fixed page backgrounds and scrolling effect. We see that there are many project sites use parallax effect, parallax is generated by the dynamic changes and the background image and js script, but today we only need CSS.


HTML
HTML structure is very simple, a background image is fixed placement class .cd-fixed-bg div element for a class of .cd-scrolling-bg div element portion for scrolling. We can place multiple .cd-fixed-bg and .cd-scrolling-bg group.
<main> 
    <div class="cd-fixed-bg cd-bg-1"> 
        <h1><!-- title goes here --></h1> 
    </div>  
  
    <div class="cd-scrolling-bg cd-color-2"> 
        <div class="cd-container"> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi... 
            </p> 
        </div>  
    </div>  
    ...other divs... 
</main> 


CSS
How to achieve the background of fixed and scrolling effect? At first, I want to use jQuery, maybe I should make a div to a fixed location, and then change the background image when scrolling the page, but feel bad get. And simple we can do a few lines of CSS, set background background-size value to a fixed element of cover, background-attachment value is set to fixed, thus achieving a single page background fixed and scrolling effect. Consider the following code:
body, html, main { 
    /* important */ 
    height: 100%; 
} 
  
.cd-fixed-bg { 
    min-height: 100%; 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
  
.cd-fixed-bg.cd-bg-1 { 
  background-image: url("../img/cd-background-1.jpg"); 
} 
.cd-fixed-bg.cd-bg-2 { 
  background-image: url("../img/cd-background-2.jpg"); 
} 
.cd-fixed-bg.cd-bg-3 { 
  background-image: url("../img/cd-background-3.jpg"); 
} 
 
  
.cd-scrolling-bg { 
    min-height: 100%; 
} 

Category: CSS

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
12 June 2017 07:18

hwerfg

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
<
  • 0 Comments
  • 0 Articles
8 November 2017 16:29

Custom essay writing service

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
very informative article. I love your site so much. custom essay writing service you have shared an informative post.

<
  • 0 Comments
  • 0 Articles
4 December 2017 19:51

Alana Tripp

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
With the help of java and CSS we are making any kind of useable program. I am programmer in paper writing service reviews company and makes the scroll bar it’s too much easy in java script.

<
  • 0 Comments
  • 0 Articles
7 January 2018 23:14

AprilHic

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
aol slots
slotomania free slots
<a href="http://casinobablogames.com/">free casino games slot machines</a>
casino games online

<
  • 0 Comments
  • 0 Articles
10 January 2018 07:20

Soniahaw

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
slots casino games
online casino real money
<a href="http://casinobablogames.com/">free casino games</a>
casino games online

<
  • 0 Comments
  • 0 Articles
24 January 2018 05:48

Julieref

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
online casino bovada
real money online
<a href="http://bablcasinogames.com/">harrah's casino locations by state</a>
online casinos real money

<
  • 0 Comments
  • 0 Articles
6 March 2018 03:03

RonaldfeS

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
viagra buy in bangkok
<a href="http://fmviagraukfjg.com/#">viagra without a doctor's prescription</a>
buy viagra uk cheap
viagra without doctor
viagra online discount
<a href="http://javiagraryjdf.com/#">viagra online</a>
buy viagra in the usa
buy viagra online
cheap-generic-viagra.co.uk erfahrungen

Information
Comment on the news site is possible only within (days) days from the date of publication.