Need to apply those Styles using .css() Jquery Fun

Question

this is the style i need

body{
      background: url("img/Background_Home.jpg") no-repeat center center fixed;
                        -webkit-background-size: cover;
                        -moz-background-size: cover;
                        -o-background-size: cover;
                        background-size: cover;


      margin:0;
    }

And this is my go..

 function actualizar_fondo(imagen){
            $('body').css({"background":"url(img/"+imagen+".jpg)"});
            $('body').css({"background":"no-repeat center center fixed"});
            $('body').css({"-webkit-background-size":"cover"});
            $('body').css({"-moz-background-size":"cover"});
            $('body').css({"-o-background-size":"cover"});
            $('body').css({"background-size":"cover"});



       }

Result: Not even background image (but with only first line, works)

i guess... problems are in second line?

Answer 1

I'll try using the distinct background properties:

function actualizar_fondo(imagen){
            $('body').css({"background-image":"url(img/"+imagen+".jpg)",
                           "background-repeat":"no-repeat",
                           "background-position":"center center",
                           "background-attachment":"fixed",
                           "-webkit-background-size":"cover",
                           "-moz-background-size":"cover",
                           "-o-background-size":"cover",
                           "background-size":"cover"});
       }

Probably you are overiding the background one in the second line of your 'actualizar_fondo' function.

Answer 2

Try the following:

function actualizar_fondo(imagen){
        $('body').css("background", "url(img/"+imagen+".jpg) no-repeat center center fixed");
        $('body').css("-webkit-background-size","cover");
        $('body').css("-moz-background-size","cover");
        $('body').css("-o-background-size","cover");
        $('body').css("background-size","cover");
}

Answer 3

Second line is overiding the result of first line. Both can be combined.

function actualizar_fondo(imagen){
        $('body').css({"background":"url(img/"+imagen+".jpg) no-repeat center center fixed"});
        $('body').css({"-webkit-background-size":"cover"});
        $('body').css({"-moz-background-size":"cover"});
        $('body').css({"-o-background-size":"cover"});
        $('body').css({"background-size":"cover"});
}

Answer 4

How in three answers do you not already have this?

$('body').css({
    "background": "url(img/"+imagen+".jpg) no-repeat center center fixed",
    "-webkit-background-size": "cover",
    "-moz-background-size": "cover",
    "-o-background-size": "cover",
    "background-size": "cover"
});

Are you sure you can't just do:

.myClass {
    background: url("img/Background_Home.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

with:

$('body').addClass('myClass');

?

Answer 5

Your second background declaration is overiding the result of first line - you need to combine them both. I'd also recommend combining all of the CSS declarations into a single JSON map:

function actualizar_fondo(imagen){
    $('body').css(
       { "background":"url(img/" + imagen + ".jpg) no-repeat center center fixed",
         "-webkit-background-size":"cover",
         "-moz-background-size":"cover",
         "-o-background-size":"cover",
         "background-size":"cover" }
    );
}