Changing backgrounds for CSS slideshow

Tags: html,css,background,slideshow

Problem :

in order to design the layout for my page I have used this example:

and I am attempting to make each slide have a different background, so that when the slide animation happens a different background is shown for each slide. Currently I am able to set 1 background for the first slide, but any other backgrounds added take precedence over this image and are present on the slides before (2>>1 and 3>>2>>1), so I am only able to set up a single background. I have attempted to change the background image for each of the slides:

#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 however does not work. I have also attempted to add an image to each slide and have them set as the background image:

<!-- 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="">

using the css:

img {
max-width: 100%;

#bg { position: fixed;
z-index: 0;
top: 0;
left: 0; }

.bgwidth { width: 100%; }
.bgheight { height: 100%; }

however this also gives me a similar error. I am unsure of how else I can do this, I am currently in the process of learning CSS/HTML so any help is appreciated! Thanks in advance!!!

EDIT: my current js fiddle is in comments (can only post 1 link). As you can see I am trying to have a different background appear for the contact slide. The gallery slide does its job and should remain solid colour. I have had no success here at all!

Solution :

Check out this fiddle:

I rewrote your code using "background" instead of "background-image":

#i1 { background: url("") no-repeat center center fixed;}
#i2 { background: url("") no-repeat center center fixed;}
#i3 { background: url("") no-repeat center center fixed;}

(Your syntax wasn't correct for background-image, but it is correct for background)

    CSS Howto..

    How to position some text?

    How to make the gradient border stay at the screen

    CSS help, how to target this link inside of div

    how to get a div to randomly move around a page (using jQuery or CSS)

    How can I explain to a programmer that CSS positioning has many benefits over table based layouts?

    How to stretch container div from header to footer with html/css?

    How I can change the CSS properties of HTML elements in run time using JavaScript or PHP?

    How to keep website footer at bottom even when page expands downwards

    how do angularJS user handle - using bootstrap css/fonts but exclude the jquery controls - scenario

    css image not showing up

    How to set a CSS background to scroll slowly?

    How can I change the opacity of a certain text by clicking another div?

    How to select a non unique element through CSS

    How to reset Chrome dev tools CSS styles filter?

    how to solve slideshow css problem?

    How do customize option box that pops up when selectbox is clicked (iOS, HTML, CSS)

    How to position a div under a link on click?

    How can I use a CSS selector to match two classes being present?

    how to ensure that each time a css class name changes from the previous, it is applied a specific style

    how to position links at the bottom in a fixed height list

    How to add a space between paragraphs when using css reset? [closed]

    How to write css fallbacks for vh vw

    How to install preexisting html, css and dreamweaver files into dreamweaver cs6?

    How to center child divs along each side of a parent div

    How to select a group of elements after every nth-element in CSS?

    How to use jQuery / CSS to swap out the contents of a DIV onmouseover on list items? [closed]

    How to fit your website for all or at lest most screen resolutions?

    why is .show() making the target div appear at top of page?

    How to set the last inner div to fill the rest of the wrapper height with CSS?

    How to align image to top left of div