user3342697 user3342697 - 1 year ago 166
CSS Question

CSS background-image slideshow

I am pretty new to CSS and HTML, but I am learning the ropes. Right now, I have a background image on my header section and I am trying to turn this into a slideshow with 3-4 images shuffling through on a timer.

I have seen some tutorials that use images through HTML, but the way I have set it up is I have my CSS property background-image set as my image.

If this doesnt make sense, here is the CSS

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

and the HTML

<header class="container global-header">
<div class="inner-w">
<div class='rmm' data-menu-style = "minimal">
<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>
<div class="large-logo-wrap">
<img src="Assets/Logos/Giadaslogoindexwhitebig.png" />

Thanks for the help!

Answer Source

Use following

//Array of images which you want to show: Use path you want.
var images=new Array('Assets/BGImages/head_sandwichman1.jpg','Assets/BGImages/head_sandwichman2.jpg','Assets/BGImages/head_sandwichman3.jpg');
var nextimage=0;

function doSlideshow(){
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download