Jquery dynamic change Settings of the background diagram

In some cases, we can provide users with very intimate functions, such as determining when the user came to visit, and then give a greeting, good evening, good afternoon and so on. And change the color of the background of the page, such as night when you can use the sky with the stars of the background, the day with the sun shining, or a specific holiday with the theme of the background, so that your site appears to be very flexible, not boring.

Here is a solution for how to implement background replacement:

How to implement

Simple, here's the JQuery code:

function doChangeBkg()
{
 var bkgUrl=$("#inputBkgUrl").val();
 var repeateMode=$("#inputRepeatMode").val();
 var s="<style type='text/css' > body{ background-repeat : "+repeateMode+"; background-image:url(""+bkgUrl+""); } </style>";
 $("#outputDiv").html(s);
}

Native JavaScript code:

The same code at the page code block index 0

Front-end code:

<div> 
 The background image URL : <input type="text" size="60" id="inputBkgUrl" /> <br />
 Background picture repetition:  <select id="inputRepeatMode"><option value="repeat" selected="selected">repeat</option><option value="no-repeat">no-repeat</option><option value="repeat-x">repeat-x</option><option value="repeat-y">repeat-y</option></select> 
<input type="button" onclick="doChangeBkg()" value=" Determine the replacement " /> 
</div> 
<div id="outputDiv"></div>