Slideshow CSS background

Question

i am looking for a way for my background image on my CSS to flip through a set of images(3-4).

Whether the solution is through JQuery, CSS or whatever, I am willing to implement it.

I am new to coding, but here is what I have so far.

MY CSS

.global-header {
min-height:600px;
background-image: url("Assets/BGImages/head_sandwichman.jpg");
background-size: cover;
text-align: center;

and my HTML

<header class="container global-header">
 <div class="inner-w">
<div class='rmm' data-menu-style = "minimal">
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="menu.html">MENU</a></li>
            <li><a href="findus.html">FIND US</a></li>
            <li><a href="about.html">ABOUT</a></li> 
        </ul>
    </div>
    <div class="large-logo-wrap">
        <img src="Assets/Logos/Giadaslogoindexwhitebig.png" />
    </div>
</div>

Cheers! Thanks for your help!

Check this answer: http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property - using jquery. You then need to think about how and when you want to flip the images — transient_loop, Mar 10 '14 at 05:24
Okay I added this @fablife, now what? it didnt change anything? Cheers! — user3342697, Mar 10 '14 at 05:32
are you familiar with jquery? where did you add it? the solution you finally need is probably a bit more complex, like a loop and a timeout. whenever the timeout fires, you use that code to change the background image — transient_loop, Mar 10 '14 at 05:35
I am a bit familiar, I threw it between a script tag and at the bottom of my HTML page — user3342697, Mar 10 '14 at 05:38
to see some first effect, try something like: The (document)ready function will execute when the html page is loaded — transient_loop, Mar 10 '14 at 05:44
As well as including the script from the previous link you gave me? or is this replacing it? — user3342697, Mar 10 '14 at 05:47
This is actually an adaptation of the code from the link to your code. If you'd use the code from the link as-is it wouldn't work for you! I suggest you check out jquery a bit deeper — transient_loop, Mar 10 '14 at 05:51
@fablife, I appreciate your help, I have added that script you provided and tailored it: Can you tell me how to slide through the images? I would be grreattlyy appreciative! — user3342697, Mar 10 '14 at 06:04
That's not going to work! For every image you want you need to issue a separate call. Check my proposal below — transient_loop, Mar 10 '14 at 06:16

transient_loop · Accepted Answer · 2014-03-10T06:42:24.733

0

Try something like this:

var counter = 0;
var images = ["Assets/BGImages/head_sandwichman2.jpg", "Assets/BGImages/head_sandwich.jpg", "Assets/BGImages/head_pizza.jpg"];

function setBackground(){
  counter++;
  var selector = counter % 3; //assuming you have 3 images to slide through
  var image = 'url("' + images[selector] + '")';
  $('.global-header').css('background-image', image);

  setTimeout(setBackground(),3000); //every 3 seconds change the image
}

$(document).ready(function() {
  setTimeout(setBackground(), 3000); //start sliding 3 seconds after the page finished loading
});

Please take care with this solution as it's late over here and I can't test it anymore. There are more elegant solutions for sure.

edited Mar 10 '14 at 06:42

answered Mar 10 '14 at 06:18

transient_loop

5,984
15
58
117

Thanks, it doesn't work, but I appreciate your help anyways. Cheers – user3342697 Mar 10 '14 at 06:23
If you want people to help you you need to post as much as possible of your code! There are innumerable ways we could get misunderstandings otherwise. I did a little edit to my code. – transient_loop Mar 10 '14 at 06:30
I am new, I apologize. I have found a solution from another user, but I will give you the point anyways for your time. Cheers! – user3342697 Mar 10 '14 at 06:36
I am glad you found a solution! You don't need to accept my solution if it's not suiting your needs though...:) Too kind, hehe – transient_loop Mar 10 '14 at 06:38
I know it is late, but I was wondering if you had a quick answer to this solution or a way to point me ina direction : http://stackoverflow.com/questions/22293523/review-slider-using-css-html-and-or-jquery-or-java – user3342697 Mar 10 '14 at 06:40

score 0 · Answer 2 · answered Mar 10 '14 at 06:38

Here is a solution to image slideshow Add a name to your image tag

 <div class="large-logo-wrap">
        <img src="Assets/Logos/Giadaslogoindexwhitebig.png" name="imgname"/>
  </div>

Then add this script

<script>
var img1=new Image()
// Link to first image
img1.src="http://"
var img2=new Image()
// Link to second image
img2.src="http://"
var img3=new Image()
// Link to third image
img3.src="http://"
var img4=new Image()
// Link to fourth image
img4.src="http://"
var step=1
function slideImages() {
if (!(document.images))
return
// add image name 
document.images.imgname.src=eval("img"+step+".src")
if (step<4)
step++
else
step=1
setTimeout("slideImages()",2000)
}
slideImages()
</script>

Slideshow CSS background

2 Answers2