Making background images responsive - fullpage.js

问题

I am using fullpage.js for parallax scrolling. Is it possible to make the background images responsive in nature when i re-size my window.

https://github.com/alvarotrigo/fullPage.js

Below is the example i am using. https://github.com/alvarotrigo/fullPage.js/blob/master/examples/backgrounds.html

If you notice each of my section has the background-size property with cover, but its still not responsive when i re-size.

#section0,
#section1,
#section2,
#section3{
    background-size: cover;
}

回答1:

Look i don't know too much about fullpage.js But i don know about resizing image according to your window size..... first of all download any image and i named it sa.jpg

<html>
    <head>
        <style type="text/css">
        #box{   
            width:100%;
        }
        <!--This class is added to img element to make it responsive -->
        img.responsive{
            max-width:100%;
            height:auto;
        }
        </style>
    </head>

    <body>
         <div id="box">
             <img src ="sa.jpg" class="responsive"></img>
         </div>
    </body>
</html>

In above code we kept image within #box div. and we also added responsive named class to img element.Assign it a max-width value of 100%. This allows the width to adjust to the browser width changes. Next, add a dynamic height property to the class.

Above code is responsive for img element..

Now if you want to use background image css property and resize your image according to screen size

<html>
    <head>
        <style style type="text/css"> 
        #box{   
            width:100%;
            height:100%;
            background-image:url("sa.jpg");
            background-size:100% auto;
            background-repeat: no-repeat;
        }
        <!--img.responsive{max-width:100%;height:auto}-->
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

回答2:

This one works best for me

background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;

来源：https://stackoverflow.com/questions/25042930/making-background-images-responsive-fullpage-js

标签

javascript

jquery

css

css3

fullpage.js