Setting CSS Background image with JQuery .css() on a preloader

Question

I want to set: background image, background size, and background repeat... How would the syntax look on here??

qLpercentage = $("<div id='qLpercentage'></div>").text("0%").css({
                    height: "40px",
                    width: "100px",
                    position: "absolute",
                    background: 'url(images/preload.gif)',
                    fontSize: "3em",
                    top: "50%",
                    left: "50%",
                    color: "#FFFFFF",
                    marginTop: "-" + (59 + qLoptions.barHeight) + "px",
                    textAlign: "center",
                    marginLeft: "-50px",
                }).appendTo(qLoverlay);

Answer 1

Why do you want to clutter your javascript when you have static attributes in your code.

It is better to have them in a separate class and add it to your element .

That would be lot cleaner.

In that way you can specify the background image, background size, and background repeat too.

CSS

.overlay
{
    height: "40px";
    width: "100px";
    position: "absolute";
    background: 'url(images/preload.gif)' 50% 50% repeat-x ;
    background-size: 275px 125px;
    fontSize: "3em";
    top: "50%";
    left: "50%";
    color: "#FFFFFF";
    textAlign: "center";
    marginLeft: "-50px";
}​

Javascript

qLpercentage = 
    $("<div id='qLpercentage'></div>").text("0%")
    .css({
        marginTop: "-" + (59 + qLoptions.barHeight) + "px"
     })
    .addClass('overlay')
    .appendTo(qLoverlay);​

Answer 2

Try adding this:

    "background-image"  : "url(my-image.png)",
    "background-repeat" : "...",
    "background-size"   : "...",

Answer 3

I've i'm correct its like this:

qLpercentage = $("<div id='qLpercentage'></div>").text("0%").css({
                    height: "40px",
                    width: "100px",
                    position: "absolute",
                    backgroundImage: 'url(images/preload.gif)',
                    backgroundRepeat: 'repeat-x',
                    backgroundSize: '10px 10px',
                    fontSize: "3em",
                    top: "50%",
                    left: "50%",
                    color: "#FFFFFF",
                    marginTop: "-" + (59 + qLoptions.barHeight) + "px",
                    textAlign: "center",
                    marginLeft: "-50px",
                }).appendTo(qLoverlay);