CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3048611
user3048611

Reputation:

setting background size using css in jquery

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.

Upvotes: 0

Views: 253

Answers (2)

LightningBoltϟ
LightningBoltϟ

Reputation: 1373

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.

Upvotes: 3

GautamD31
GautamD31

Reputation: 28763

Try like

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

Upvotes: 1

Related Questions