Question

I want to add few images for my game scoreboard as background using jquery.

eg. header.jpg for header, footer.jpg for footer and body.jpg for body.
I have created a small game in jquery.

Currently, My game scoreboard is showing only few text messages. I want to show them on some background image.

Below is my code which i am using to show text messages. Please help me so that i can display background images on them.

code:

     ......................
     ......................
        else {
        goldenGoal = false; 
        $("#message1").html("You Lose"); 
        $("#message1").css("color", "red");
          $("#message1").css("size", "190px");
        $("#play").html("Play Level Again");
        $("#lgoals").html(0);
        $("#vgoals").html(0);
        stats.loses++;
        //level = 1;
        //fps = 50;
        //difficulty = 0.2;
    }
       ..................
       ..................

Answer 1

Basically, you have to do something like that:

$('#containerID').css('background-image', 'url(path/to/image.jpg)');

Or, in your example:

$('body').css('background-image', 'url(body.jpg)');
$('#header').css('background-image', 'url(header.jpg)');
$('#footer').css('background-image', 'url(footer.jpg)');

---

By the way, just as an input: Try to optimize your code. It’s (unremarkably!) faster and just cleaner. Example:
Instead of

$("#message1").html("You Lose"); 
$("#message1").css("color", "red");
$("#message1").css("size", "190px");

You could do

$("#message1")
    .html("You Lose")
    .css({
        "color": "red",
        "size": "190px"
    });