Background Image Change using jQuery

You would have seen in many websites where user can change website background to see the content/product better. It’s always a better idea to offer such feature if you are selling a product. You don’t know what color, image will make your product look appealing to user, so it’s better to offer different settings so that user can select color, background images as per their wish and see how your product works and looks. I have seen this feature in most of the digital products sellers mainly seller of themes and templates. They offer customers to test how their themes and templates look in different ways to convert youtube videos to mp3 color skins and with different backgrounds. In this tutorial we will focus on how to change background image on click using jQuery.

background image change jquery

Live Demo

[sociallocker]Download Code[/sociallocker]

It’s really very easy to do with jQuery, just 4 lines of code and it’s done. Let’s see how easily you can create it for your web projects. We have one index.html file to display the thumbnails so that users can select images they like to have set as background for the webpage. Below is our simple code for index.html:


<!DOCTYPE HTML>
<html>
<head>
<title>Background image change onclick using jQuery - InfoTuts</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="bg">
<div id="bgimage"></div>
<div id="mhead">
<h2>Background image change onclick using jQuery - InfoTuts</h2>
</div>
<div id="menu"><img src="images/bgclick.png"></div>
<div id="thumb">
<ul>
	<li><img src="images/1.jpg" width="85" height="82" dir="images/1.jpg"></li>
	<li><img src="images/2.jpg" width="85" height="82" dir="images/2.jpg"></li>
	<li><img src="images/3.jpg" width="85" height="82" dir="images/3.jpg"></li>
	<li><img src="images/4.jpg" width="85" height="82" dir="images/4.jpg"></li>
	<li><img src="images/5.jpg" width="85" height="82" dir="images/5.jpg"></li>
	<li><img src="images/6.jpg" width="85" height="82" dir="images/6.jpg"></li>
	<li><img src="images/7.jpg" width="85" height="82" dir="images/7.jpg"></li>
	<li><img src="images/8.jpg" width="85" height="82" dir="images/8.jpg"></li>
	<li><img src="images/9.jpg" width="85" height="82" dir="images/9.jpg"></li>
</ul>
</div>
</body>
</html>
<p style="text-align: justify;">

Now we have script.js file which changes the background image whenever user selects a new image by clicking on it.

Below is easy code for script.js:


$(document).ready(function(){
$('#menu').click(function(){
$('#thumb').slideToggle('slow');
});
$('li img').click(function(){
 var imgbg = $(this).attr('dir');
 //console.log(imgbg);
 $('#bg').css({backgroundImage: "url("+imgbg+")"});
 });

 $('#bgimage').click(function(){
 $('#thumb').hide();

 });

});
<p style="text-align: justify;">

That’s it, we have another file style.css just to style the page. You can get style.css in demo file which you can download.

Note: To make your webpage load faster you can generate smaller images like thumbnails for all the background image. So in “thumb” div you can display those smaller images.

We will cover another tutorial on changing color skin of website dynamically when user selects to see your website with different color options. Please leave your comments if this simple tutorial helped you. Share this with your friends.

3 thoughts on “Background Image Change using jQuery”

  1. Pingback: Background Image Change using jQuery - W3easystep

  2. Hello Sanjeev, that’s really good and it works fine. But now, I’m trying to do it in WordPress but I’m not be able. Do you know some idea to get it.

    Thank you in advance.
    Regards.

  3. hi . i used this jquery but i have problem .in the my site that use asp2012 after loaded jquery textbox button controls and so on never work these are only readonly .pleas guide me

Comments are closed.