<div>
For changing image you can have the add rotator concept if it helps you.
</div>

<div>
that will pick a random image from the array and apply it to the background of the element with id of &quot;header&quot; 

<pre><code class="code-10 nolinks" id="code-124944">var bgImages = new Array (
		&quot;image1.jpg&quot;,
		&quot;image2.jpg&quot;,
		&quot;image3.jpg&quot;
	);
	
element = document.getElementById(&quot;header&quot;);
if (element) {
	element.style.background = &quot;url(&quot; + bgImages[Math.floor(Math.random()*bgImages.length)] + &quot;)&quot;;
} else {}
</code></pre>
</div>

<div>
@MMDeveloper: 
 
I can't seem to get this to work. Do I have to change anything in my CSS? At the moment in looks like this... 
 
thanks 

<pre><code class="code-10 nolinks" id="code-124957">#header {
	float: left;
	width: 735px;
	height: 278px;
	padding:0;
	background: #74AFD3 url(../img/1.jpg) bottom left no-repeat;
 
/*and the script in the head ======================================================*/ 
 
 
&lt;script type=&quot;text/javascript&quot;&gt;
var bgImages = new Array (
 &quot;img/1.jpg&quot;,
 &quot;img/2.jpg&quot;
 
 );
 
element = document.getElementById(&quot;header&quot;);
if (element) {
 element.style.background = &quot;url(&quot; + bgImages[Math.floor(Math.random()*bgImages.length)] + &quot;)&quot;;
} else {}
&lt;/script&gt;
</code></pre>
</div>

<div>
you should wrap that javascript into a function that you call after the page loads (or just put it at the bottom of the page). Currently that code is trying to access an element that, at that point in time, doesn't exist yet cause it hasn't been drawn onto the screen yet.
</div>

<div>
MMDeveloper - my apologies I'm a newbie at this! I see what you're saying but how do I wrap into a function? Do you mean an external .js file? 
 
Will my html still validate? 
 
thanks?
</div>

<div>
 

<pre><code class="code-10 nolinks" id="code-125003">function changeBG(elementID) {
	var bgImages = new Array (
			&quot;image1.jpg&quot;,
			&quot;image2.jpg&quot;,
			&quot;image3.jpg&quot;
		);
		
	element = document.getElementById(elementID);
	if (element) {
		element.style.background = &quot;url(&quot; + bgImages[Math.floor(Math.random()*bgImages.length)] + &quot;)&quot;;
	} else {}
}
 
then just before the closing body tag
&lt;script type=&quot;text/javascript&quot;&gt;
&lt;!--
changeBG(&quot;header&quot;);
--&gt;
&lt;/script&gt;
</code></pre>
</div>

<div>
Thanks for your patience works a treat! 
 
One last thing 
 
How would I make this work as an external .js file. I assume I can't just cut and paste as I'll have the same issue as before of code trying to access an element doesn't exist? 
 
thanks
</div>

<div>
Fantastic help - thanks very much
</div>

<div>
<div class="content wysiwyg-content">
Hi All, 
 
Please could someone recommend a lean javascript that will change the background-image in my CSS styles for #header on page refresh. 
 
I have seen various solutions on EE of fade in/out scripts and switchers but I need something that will just change on refresh. 
 
The site I'm working on needs to validate to AAA guidelines and the script needs to work back to IE6 at least. 
 
Many thanks as always &nbsp;
</div>
</div>

Hi All,

Please could someone recommend a lean javascript that will change the background-image in my CSS styles for #header on page refresh.

I have seen various solutions on EE of fade in/out scripts and switchers but I need something that will just change on refresh.

The site I'm working on needs to validate to AAA guidelines and the script needs to work back to IE6 at least. 

Many thanks as always  

Javascript to change header background-image on refresh.

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.