Jquery how to change your website background?

Question

In my website, I have css like this:

body { 
  background: #FFF url(../images/bg.jpg) no-repeat center fixed;
}

So it set my background image, and what I want to do is when user load some page the background image is change, not only for this page he is current on but for all.

How can I do this ?

For now I have script like this:

<script>
document.body.style.background="#FFF url('../images/bg2.png') no-repeat center fixed";
</script>

So it change my background image but only for that current page, others all loaded with default background image defined in css :(

i didnt mention that the name of image is provided in the page where i want to change that bacground and it is dynamic

USER ACTION EXAMPLE: here we are going to website like www.example.com and there is some bacground i change page to www.example.com/account i have the same bacground and when i go to www.example.com/change i want to change my bacground image so when no i go again to www.example.com/account the image is also changed

Answer 1

Use HTML5 localStorage to store the style.

Then when load:

$("body").css("background",localStorage.style);

Answer 2

Write your script in a file and include that file in all the pages using the <script> tag.

Or the other solution is-

Just write the script in all pages! But I don't think you want to do that repetitive work because if someday you plan to change the script, you have to change it on all pages. But in the first solution that I mentioned, you have to change it at only one place.

Added:

Based on your comments, what I can think of is-

1- Create a global variable which is persistent across all your pages on your site. Before Every time you load a page, check whether it is true or false. If it is true, use the old background. If it is false use the new background. Keep it true by default and when you open the www.example.com/change page, you set it to false.

2- Place the CSS for background in a file. When you load this www.example.com/change page, change the contents of this file.

Answer 3

 simply by : 

$('body').css('background','url(imagefile.png)');

Answer 4

try these

$(this).css('background-color', 'red');

or this

$(this).css("background", "url('../images/r-srchbg_white.png'))

or this

$(this).parent().css("background", "url('../images/r-srchbg_white.png') no-repeat");

Answer 5

You can use default layout for all pages...like master page......

In that master page body only, you will be loading all your pages html,

If the user loaded that specific page, change the background image of the master page and change will be affected to the all pages because all pages inherit from master page.