BWSnippet

jQuery - change background image of body / page

jQuery - change background image of body / page

change the background image of the body using jQuery

The simple way

$('body').css('backgroundImage' , 'url("../images/myawsomeimage.jpg")' );

More advanced way

HTML

<h1>Background change test</h1>
<ul id="imgChangerList">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

jQuery

var backgroundImages=["honMoon1.jpg","honMoon2.jpg","honMoon3.jpg"];
	
$(document).ready(function() {

$('#imgChangerList li').live('click', function() {
$('body').css('backgroundImage' , 'url("resources/images/' + backgroundImages[$(this).index()] + '")' );
});
});

Here is a working example if you care to see: change background images using jQuery

Tags

jQuery - change background image of body / page