Making background images responsive - fullpage.js

StackOverflow https://stackoverflow.com//questions/25042930

Question

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;
}
Was it helpful?

Solution

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>

OTHER TIPS

This one works best for me 

background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top