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);
share|improve this question
Have you even tried to do it yourself? This question practically answers itself. – Christian Varga Nov 28 '12 at 19:01
In CSS you can 'background:url(images/preload.gif) no-repeat ...', – Valky Nov 28 '12 at 19:04
feedback

3 Answers

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);​
share|improve this answer
feedback

Try adding this:

    "background-image"  : "url(my-image.png)",
    "background-repeat" : "...",
    "background-size"   : "...",
share|improve this answer
feedback

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);
share|improve this answer
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.