How to set background Image with with jquery

Question

I am trying to set background image of a div for that I am trying

var a = "http://media1.santabanta.com/full2/Indian%20%20Celebrities(F)/Sonam%20Kapoor/sonam-kapoor-40a.jpg";
$("#login-cover").css('background-image', 'url("' + a + '");');

but it is not showing image as background. Console is not showing any error

I tried above here

see this http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property — Suchit kumar, Dec 15 '14 at 05:05

score 4 · Answer 1 · answered Dec 15 '14 at 05:04

You have a ; at the end of the css value

var a = "http://media1.santabanta.com/full2/Indian%20%20Celebrities(F)/Sonam%20Kapoor/sonam-kapoor-40a.jpg";
$("#login-cover").css('background-image', 'url("' + a + '")');

#login-cover {
  position: absolute;
  background-repeat: no-repeat;
  width: 100%;
  height: 90%;
  top: 0px;
  left: 0px;
  right: 0px;
}
#wrap {
  height: 90%;
  margin: 0 auto 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
  <div class="container-fluid" id="login-cover"></div>
</div>

score 3 · Accepted Answer · edited Dec 15 '14 at 05:27

3

Just remove ; like below

$("#login-cover").css('background-image', 'url("' + a + '")');

Working Demo

edited Dec 15 '14 at 05:27

Innodel

1,416
12
16

answered Dec 15 '14 at 05:04

Manwal

23,450
12
63
93

score 3 · Answer 3 · answered Dec 15 '14 at 05:04

Try this in place of your javascript

var a= "http://media1.santabanta.com/full2/Indian%20%20Celebrities(F)/Sonam%20Kapoor/sonam-kapoor-40a.jpg"; 
$("#login-cover").css('background', 'url("' + a + '")'); // You had an un-needed semi-colon in your 2nd parameter

score 1 · Answer 4 · edited Dec 15 '14 at 06:01

1

Try $("#login-cover").css('background-image', 'url("' + a + '")');

edited Dec 15 '14 at 06:01

Suchit kumar

11,809
3
22
44

answered Dec 15 '14 at 05:16

Debasish Pothal

387
1
9

How to set background Image with with jquery

4 Answers4