jQuery Background Change

Today, We want to share with you jQuery Background Change.In this post we will show you jquery change background image fade, hear for how to change div background color dynamically using jquery we will give you demo and example for implement.In this post, we will learn about Change Background Image of HTML DIV with Fade Animation using jQuery with an example.

Background Change using CSS and jQuery

There are the Following The simple About simple CSS Background Change using jQuery Full Information With Example and source code.

Free Live Chat for Any Issue

As I will cover this Post with live Working example to develop How to Set CSS background-image Property Using jQuery, so the jQuery: Change the background color of a element for this example is following below.

Also Read This 👉   Multiselect dropdown with checkboxes demo code in php

Step 1: HTML


<body id="panel">
 	<h3>Changing background image using jquery</h3>
<div id="card"></div>
<div id="cheaponcup">
<div id="bunch"><img src="bunch/panelclick.png" width="24" height="26"></div>
<div id="panelbox">
<div id="websname">
<li><img src="bunch/g+.png" width="90" height="95" dir="2.png"></li>
<li><img src="bunch/g.png" width="90" height="95" dir="1.png"></li>
<li><img src="bunch/you.png" width="90" height="95" dir="3.png"></li>
<li><img src="bunch/mp.png" width="90" height="95" dir="4.png"></li>
<li><img src="bunch/pl.png" width="90" height="95" dir="5.png"></li>
<li><img src="bunch/n.png" width="90" height="95" dir="6.png"></li>
<li><img src="bunch/gm.png" width="90" height="95" dir="7.png"></li>
<li><img src="bunch/gd.png" width="90" height="95" dir="8.png"></li>
<li><img src="bunch/gc.png" width="90" height="95" dir="9.png"></li>
<li><img src="bunch/gt.png" width="90" height="95" dir="10.png"></li>
<li><img src="bunch/gbb.png" width="90" height="95" dir="11.png"></li>
<li><img src="bunch/gb.png" width="90" height="95" dir="12.png"></li>
<li><img src="bunch/gp.png" width="90" height="95" dir="13.png"></li>
<div id="extra">More</div>
<div id="cheap">Less</div>


<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

 $('li img').click(function(){
  var imgpanel = $(this).attr('dir');
  $('#panel').css({backgroundImage: "url("+imgpanel+")"});
$('#card').click(function() {

Step 3: CSS

#cheaponcup{width:30px; height:20px;position:absolute;right:0; top:50px; z-index:3;}
ul{list-style:none; margin:0; padding:0;}
li{ float:left;padding:5px; cursor:pointer;}
#panelbox{ width:320px; height:380px; color:#000; box-shadow:0 0 10px #CCC; border:solid #CCC 1px;font-family:Tahoma, Geneva, sans-serif; font-size:18px; color:#666;overflow:hidden; display:none; position:absolute; right:10px;}
#websname{ width:300px; height:290px; overflow:hidden; margin:20px;}
#extra{ width:100%; height:40px; cursor:pointer; background-color:#FFD7AE; text-align:center; padding:15px 0 0 0; font-size:14px;}
#cheap{width:100%; height:40px; cursor:pointer; background-color:#FFD7AE; text-align:center; padding:15px 0 0 0; font-size:14px;}
#bunch{ cursor:pointer;}
#card{background-image:url(light.png);position:fixed; top:0; left:0; width:100%; height:100%; z-index:1;}
#panel{background-image:url(1.png);background-size:100% auto;}

Web Programming Tutorials Example with Demo

Read :

Also Read This 👉   How to Change the src of an Image using jquery?


You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jQuery Background Change.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Rate this post