0

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

http://www.designmadeingermany.de/slideshow/#a1

http://jsfiddle.net/nimbu/KEqSF/?utm_source=website&utm_medium=embed&utm_campaign=KEqSF

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!

Andrew fox
  • 5
  • 4

1 Answers1

0

Check out this fiddle: http://jsfiddle.net/6j1hav7x/

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

#i1 { background: url("http://lorempixel.com/800/600/sports") no-repeat center center fixed;}
#i2 { background: url("http://lorempixel.com/800/600/abstract") no-repeat center center fixed;}
#i3 { background: url("http://lorempixel.com/800/600/animals") no-repeat center center fixed;}

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

Andreyu
  • 424
  • 1
  • 5
  • 19
  • this is exactly what I am looking for! Most guidelines seem to tend towards using background syntax for background-image tags. Thanks so much! – Andrew fox Jun 10 '16 at 12:10
  • @Andrewfox Cool, glad I could help. If my answer fixed your problem you can also mark it as "accepted". – Andreyu Jun 10 '16 at 12:19
  • Hi, slight problem. I am trying to upload images that are 3000px in width for my background, however every hosting site either has an upload limit or compresses the image to 1024px max size. How would you change this code for local files/where would you host images that are this large without losing size? – Andrew fox Jun 10 '16 at 12:30
  • Assuming the image is in the same folder as your HTML file, you can write it like this: #i1 { background: url("image.jpg") no-repeat center center fixed;} See this question & answer for details: http://stackoverflow.com/questions/14489016/how-to-properly-reference-local-resources-in-html – Andreyu Jun 10 '16 at 12:37
  • I have tried moving the file to the same folder with no luck... `#i1 { background: url("bg1.jpg") no-repeat center center fixed; }` this just shows a white background, even though there is an image in the correct folder with the HTML file. If I place an img tag with the same path it shows the picture though. – Andrew fox Jun 10 '16 at 12:40
  • Sorry, my bad. I should have said "in the same folder as your CSS file". URLs written in the CSS file need to be relative to that file. – Andreyu Jun 10 '16 at 12:58