Set background image in CSS using jquery

Question

I am trying to set the background image for one of my html element using jquery

<div class="rmz-srchbg">
    <input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox">
    <input type="submit" value="&nbsp;" id="srchbtn" class="rmz-srchico">
    <br style="clear:both;">
</div>

$("#globalsearchstr").focus(function(){
    $(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat;");
});

but this never works.On focus only change happens is that a style attribute is added to HTML, like this

<div class="rmz-srchbg" style="">

</div>

No change in CSS happens.

what about using absolute path? Check in console if your relative path is accurate — A. Wolff, Dec 03 '13 at 11:47
**CSS** $(this).css('background-image', 'url(' + imageUrl + ') no-repeat'); — Prateek, Dec 03 '13 at 11:53
this wont work background-image is wrong it should be backgroundImage — Aditya Ponkshe, Dec 03 '13 at 11:55

score 22 · Accepted Answer · answered Dec 03 '13 at 11:49

Try this:

<div class="rmz-srchbg">
    <input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox">
    <input type="submit" value="&nbsp;" id="srchbtn" class="rmz-srchico">
    <br style="clear:both;">
</div>
<script>
$(function(){
   $('#globalsearchstr').on('focus mouseenter', function(){
    $(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat");
   });
});
</script>

score 10 · Answer 2 · edited May 23 '17 at 11:48

10

Use :

 $(this).parent().css("background-image", "url(/images/r-srchbg_white.png) no-repeat;");

instead of

 $(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat;");

More examples you cand see here

edited May 23 '17 at 11:48

Community

1
1

answered Dec 03 '13 at 11:51

Aditzu

706
1
13
24

1

to use `background-image` in jquery, you should use `backgroundImage` ! – Payam Shakibafar Dec 03 '13 at 11:53
both methods are accepted. – Aditzu Dec 03 '13 at 11:54
For sure you can. http://www.w3schools.com/css/css_background.asp – Aditzu Apr 22 '15 at 12:15

score 4 · Answer 3 · answered Dec 03 '13 at 11:53

4

try this

 $(this).parent().css("backgroundImage", "url('../images/r-srchbg_white.png') no-repeat");

answered Dec 03 '13 at 11:53

Aditya Ponkshe

3,631
4
37
57

Thanks for sharing this. +1 for `''` in `url()`. This works like a charm. – OO7 Oct 17 '14 at 07:23

score 2 · Answer 4 · answered Dec 03 '13 at 11:48

2

Try this

$("#globalsearchstr").focus(function(){
    $(this).parent().css("background", "url('../images/r-srchbg_white.png') no-repeat");
});

answered Dec 03 '13 at 11:48

Amit

15,021
8
44
66

Not working.Still same problem(explained in question) – None Dec 03 '13 at 11:50
@Athul try now, what is error? – Amit Dec 03 '13 at 11:52

score 1 · Answer 5 · answered Dec 03 '13 at 11:50

1

Remove the semi-colon after no-repeat, in the url and try it .

$("#globalsearchstr").focus(function(){
    $(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat");
});

answered Dec 03 '13 at 11:50

Pbk1303

3,532
2
28
47

"background" property is not correct. "background-image" you wanna say. – Aditzu Dec 03 '13 at 11:58

score 1 · Answer 6 · answered Dec 03 '13 at 11:58

1

You have to remove the semicolon in the css rule string:

$(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat");

answered Dec 03 '13 at 11:58

Massimo Guidi

150
1
1
8

score 1 · Answer 7 · edited Feb 11 '16 at 00:05

1

<div class="rmz-srchbg">
  <input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox">
  <input type="submit" value="&nbsp;" id="srchbtn" class="rmz-srchico">
  <br style="clear:both;">
</div>

$(document).ready(function() {
  $('#globalsearchstr').bind('mouseenter', function() {
    $(this).parent().css("background", "black");
  });
});

edited Feb 11 '16 at 00:05

Igor Ivancha

3,309
4
30
39

answered Dec 03 '13 at 12:16

sumit

312
2
7

Set background image in CSS using jquery

7 Answers7

Linked