I'm using this [Backstretch plugin](https://github.com/srobbin/jquery-backstretch) to apply a stretched background image to my body element.

```
$("body.apples").backstretch("/apples.jpg");
$("body.oranges").backstretch("/oranges.jpg");
$("body.pears").backstretch("/pears.jpg");

```

I want my body class to change on refresh, so it shows the different background images on refresh. I'm also trying to work out how to only show the related `.wrapper` div below when the page is refreshed.

```
<body class="apples">
    <div class="wrapper apples">
        <h1>Something about Apples</h1>
        <p>Some content</p>
    </div>

    <div class="wrapper oranges">
        <h1>Something about Oranges</h1>
        <p>Some content</p>
    </div>

    <div class="wrapper pears">
        <h1>Something about Pears</h1>
        <p>Some content</p>
    </div>
</body>

```

I've managed to get the `.wrapper` div to change on refresh with this bit of JS:

```
function randomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }

    function RandomFruit() {
        var r = randomFromTo(1, $('.wrapper').length);
        $('.wrapper').hide().eq(r - 1).show();
    }

    $(document).ready(function() {
        RandomFruit();
});

```

I've got a working demo here: <http://codepen.io/realph/pen/KCEtB>

For some reason, I can't work out how to make the background and `.wrapper` div change.

Any help with this is appreciated. Thanks in advance.