For my page layout design, I referenced the following examples:
http://jsfiddle.net/nimbu/KEqSF/?utm_source=website&utm_medium=embed&utm_campaign=KEqSF
I am trying to create different backgrounds for each slide in order to have a unique background displayed with each slide transition. However, I am facing an issue where only one background can be set and subsequent slides inherit the same background image. I tried changing the background image for each slide individually:
#i1 { background-image: url("images/bg1.jpg") no-repeat center center fixed;}
#i2 { background-image: url("images/bg2.jpg") no-repeat center center fixed;}
#i3 { background-image: url("images/bg3.jpg") no-repeat center center fixed;}
This method did not work as expected. I also attempted to add an image to each slide and use it as the background:
<!-- First Page #a1 -->
<div id="i1" class="page">
<img src ="images/bg1.jpg" id="bg" alt="">
<!-- Second Page #a2 -->
<div id="i2" class="page">
<img src ="images/bg2.jpg" id="bg" alt="">
<!-- Third Page #a3 -->
<div id="i3" class="page">
<img src ="images/bg1.jpg" id="bg" alt="">
With the following CSS:
img {
max-width: 100%;
}
#bg { position: fixed;
z-index: 0;
top: 0;
left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
Unfortunately, this approach also resulted in a similar error. I'm uncertain about how to proceed further as I continue to learn CSS/HTML. Any guidance would be greatly appreciated! Thank you in advance!!!
EDIT: I have shared my current js fiddle link in the comments section. My goal is to display a different background on the contact slide while keeping the gallery slide with a solid color background. Unfortunately, I haven't been successful in achieving this yet!