I have just started using the fullpage.js library(?) and am wondering how to add in a background image to a section. I have tried adding in a new div inside the section and also adding a new class to the section but to no avail. Please help!
HTML
<div class="section bg" id="section0"><h1>Section</h1></div>
<div class="section" id="section1">
<div class="slide active"><div class="wrap"><h1>Hello fullPage.js</h1></div></div>
<div class="slide"><h1>This is an awesome plugin</h1></div>
<div class="slide"><h1>Which enables you to create awesome websites</h1></div>
<div class="slide"><h1>In the most simple way ever</h1></div>
</div>
<div class="section" id="section2"><h1>Just testing it</h1></div>
<div class="section" id="section3"><h1>Looks good</h1></div>
</body>
CSS (My custom css on top of the standard)
.bg {
background: url(../img/Blurred%20Backgrounds%20(13).jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You need to use CSS for it. Use and id
for each section and add the corresponding styles for it.
It has been treated on github issues: https://github.com/alvarotrigo/fullPage.js/issues/6
Here you have the official demo or it: http://alvarotrigo.com/fullPage/examples/backgrounds.html#
(you can see the CSS styles in the page source code)
/* Backgrounds will cover all the section
* --------------------------------------- */
#section0,
#section1,
#section2,
#section3{
background-size: cover;
}
/* Defining each sectino background and styles
* --------------------------------------- */
#section0{
background-image: url(imgs/bg1.jpg);
padding: 30% 0 0 0;
}
#section2{
background-image: url(imgs/bg3.jpg);
padding: 6% 0 0 0;
}
#section3{
background-image: url(imgs/bg4.jpg);
padding: 6% 0 0 0;
}
#section3 h1{
color: #000;
}
/*Adding background for the slides
* --------------------------------------- */
#slide1{
background-image: url(imgs/bg2.jpg);
padding: 6% 0 0 0;
}
#slide2{
background-image: url(imgs/bg5.jpg);
padding: 6% 0 0 0;
}
I took care of it in the body CSS:
body{
background:url("../img/background.jpg") center top no-repeat;
background-position: fixed;
background-color: #000000;
}
You can also do it by styling the .section
similarly, or use the id
of each section to style:
.section{
background:url("../img/background.jpg") center top no-repeat;
background-position: fixed;
background-color: #000000;
}
--OR--
#id{
background:url("../img/background.jpg") center top no-repeat;
background-position: fixed;
background-color: #000000;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With