Question

I’m working on a site that has random background images in the container. Every time you load the site there is a different image generated by a php script.
When the PHP script randomly chooses 1.jpg to show, I would like bg1.png to be used as background image.
If the PHP script randomly chooses 2.jpg to show, I would like bg2.png to be used as background image.

This is the jQuery i already made. But I can not find a way how to call the value of the div called background

The jQuery:

$(document).ready(function() {

if ($("#background").attr("value") == 1) {
$(body).css("background-image", "url(images/bg/bg1.png);");
}

else if ($("#background").attr("value") == 2) {
$(body).css("background-image", "url(images/bg/bg2.png);");
}

else if ($("#background").attr("value") == 3) {
$(body).css("background-image", "url(images/bg/bg3.png);");
}

else if ($("#background").attr("value") == 4) {
$(body).css("background-image", "url(images/bg/bg4.png);");
}

else if ($("#background").attr("value") == 5) {
$(body).css("background-image", "url(images/bg/bg5.png);");
}

else if ($("#background").attr("value") == 6) {
$(body).css("background-image", "url(images/bg/bg6.png);");
}

else {
$(body).css("background-image", "url(images/bg.png);");
}
});

The Php:

echo "<div id='background' value=\"$random\"><img src=\"$image_folder/$image_name\" alt=\"$random\" /></div>";

Answer 1

What you are doing now is quite silly, consider setting the background by echo’ing the code in PHP.
For example:

<style>
body
{
 background-image: url("images/bg<?php echo rand(0,7); ?>.png");
}
</style>

There shouldnt be any clientside processing needed here.