setting background size using css in jquery

Question

I have a div container on which i have placed two more div's (say 1 & 2) for placing the content . I have set different ids for the div's and on clicking the link( of div 2) i am changing the background image of the background div. I am trying to set the background-size as cover to occupy the whole screen width but only the upper part of the image is getting displayed. Here is the code which i am using to set the background size for the div.

     <script>
    $(document).ready(function(){
        //autoOpen: false,
        $(".span12").css('background-image','url(../images/assorting_2.jpg)','background-size','100%');
<script>

I could have posted the images but i am unable to post it as i have less points.

Answer 1

Try this:

$(".span12").css({
    'background-image':'url(../images/assorting_2.jpg) no-repeat',
    'background-size':'cover'
});

See this for using multiple jQuery CSS properties. And this for using background cover.

Answer 2

Try like

$(".span12").css({
                   'background-image':'url(../images/assorting_2.jpg) no-repeat',
                   'background-size':'100%'
                 });