belinq belinq - 6 months ago 35
CSS Question

change background image in body

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;
line-height:20px; }


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

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


First load JQuery in the head tag:

<script src="//" 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)');