change background image in body

css, javascript

Solution

If you have JQuery loaded already, you can just do this:

$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');

EDIT:

First load JQuery in the head tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Then call the Javascript to change the background image when something happens on the page, like when it finishes loading:

<script type="text/javascript">
    $(document).ready(function() {
        $('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
    });
</script>

Problem

How do i change the background image in CSS at run time? I have the following background image in body and can the image be changed at run time? ``` body { height: 100%; background: #fff8db url(../images/backgrounds/header-top.jpg) no-repeat center top; /*background-color: #fff8db;*/ /*background-size: 1650px 900px;*/ font-family: Arial, Verdana, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#404040; line-height:20px; } ```

Original source