CSS Auto Change Header Image

HTML & CSS
1

Hi am new here
I Need Help
am working on a site that uses css to load the header file. I need help to make this change the images after a given time.

it uses 2 files at once. what do i have to add to the script some it changes the image at a predetermined time.

say it loads header1.jpg and header1.png ----> header2.jpg and header2.png than header2.jpg ----> header2.png that back again to the first file.



/* begin Header */ 
div.art-Header 
{ 
margin: 0 auto; 
position: relative; 
z-index:0; 
width: 990px; 
height: 200px; 
} 

div.art-Header-png 
{ 
position: absolute; 
z-index:-2; 
top: 0; 
left: 0; 
width: 990px; 
height: 200px; 
background-image: url('images/Header1.png'); 
background-repeat: no-repeat; 
background-position: left top; 
} 

div.art-Header-jpeg 
{ 
position: absolute; 
z-index:-1; 
top: 0; 
left: 0; 
width: 990px; 
height: 200px; 
background-image: url('images/Header1.jpg'); 
background-repeat: no-repeat; 
background-position: center center; 
}
2

Hi, Welcome to Sitepoint :slight_smile:

This is not really a CSS question and you would need to look for a script to do what you want as CSS can’t make behavioural changes like that.

There are a number of scripts around such as this one that will allow for timed galleries to display and may be suitable for your needs.

Otherwise you would need to code it yourself with some javascript. I can move the thread to the Javascript forum if the above is of no use and perhaps someone there will be more help than me.