Jquery how to change your website background?


Tags: javascript,jquery,css,web-site-project

Problem :

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



Solution :

Use HTML5 localStorage to store the style.

Then when load:

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

    CSS Howto..

    how can i add class to errorsummay without remove header message

    JavaScript: How to get a dynamically created element's width?

    How to use css3 transition on hover for td?

    2nd image appears as mirror image in IE— CSS image FLIP transform- How to fix?

    How to run/debug Web Application project without cache/cookies?

    Can't Figure Out How to Fix CSS Width

    Javascript slide showing the last image 5 times

    css scroll/touch slide view - how to use -ms-scroll-snap or the like?

    How to get html data-attribute value in css regular expressions

    How do I make this Javascript checkbox trigger action work like my CSS only example

    How to get hovering shadow under a letter with CSS-only?

    How to blur one side of the div using CSS

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    How to render thin fonts more smoothly in CSS 3 on Windows?

    Foundation CSS Framework, how to change triangle on accodion

    How to prevent links from wrapping in CSS megamenu div (inheritance issue)

    CSS How to generate this Shape on a Div or on Canvas

    How do i get the submenus to show with a small window size?

    How to position background image inside table cell with padding

    how to get parameter orignal value by receiving it in function

    How to get rid of css inherited from a css file?

    how do I add equal gap on each side of the text with css?

    how to fix the css padding in this situation?

    How to addStyleNames “Multiple css classes” into 1 element in UiBinder in GWT?

    how to align divs vertically in html and css?

    How to style a “list item > link” in jquery mobile

    How to scale an entire webpage down to ipad or phone size

    How can i make the horizontal navigation menu center aligned

    How to select col id using jquery to hide via css

    How to combine Background Image and CSS Gradient