Set background image in CSS using jquery [duplicate]

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
– A. Wolff, Commented Dec 3, 2013 at 11:47
CSS $(this).css('background-image', 'url(' + imageUrl + ') no-repeat'); — Prateek
– Prateek, Commented Dec 3, 2013 at 11:53
this wont work background-image is wrong it should be backgroundImage — Aditya Ponkshe
– Aditya Ponkshe, Commented Dec 3, 2013 at 11:55

Ringo · Accepted Answer · 2013-12-03 11:49:39Z

22

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>

answered Dec 3, 2013 at 11:49

Ringo

3,9873 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:48:29Z

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, 2017 at 11:48

CommunityBot

11 silver badge

answered Dec 3, 2013 at 11:51

Aditzu

7061 gold badge16 silver badges25 bronze badges

3 Comments

Payam Shakibafar Over a year ago

to use background-image in jquery, you should use backgroundImage !

Aditzu Over a year ago

both methods are accepted.

Aditzu Over a year ago

For sure you can. w3schools.com/css/css_background.asp

Aditya Ponkshe · Accepted Answer · 2013-12-03 11:53:39Z

4

try this

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

answered Dec 3, 2013 at 11:53

Aditya Ponkshe

3,9304 gold badges43 silver badges58 bronze badges

1 Comment

OO7 Over a year ago

Thanks for sharing this. +1 for '' in url(). This works like a charm.

Amit · Accepted Answer · 2013-12-03 11:48:38Z

2

Try this

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

answered Dec 3, 2013 at 11:48

Amit

15.4k8 gold badges49 silver badges69 bronze badges

2 Comments

None Over a year ago

Not working.Still same problem(explained in question)

Amit Over a year ago

@Athul try now, what is error?

Pbk1303 · Accepted Answer · 2013-12-03 11:50:52Z

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 3, 2013 at 11:50

Pbk1303

3,7823 gold badges34 silver badges47 bronze badges

1 Comment

Aditzu Over a year ago

"background" property is not correct. "background-image" you wanna say.

Massimo Guidi · Accepted Answer · 2013-12-03 11:58:43Z

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 3, 2013 at 11:58

Massimo Guidi

1501 gold badge1 silver badge8 bronze badges

Comments

Igor Ivancha · Accepted Answer · 2016-02-11 00:05:58Z

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, 2016 at 0:05

Igor Ivancha

3,4614 gold badges32 silver badges39 bronze badges

answered Dec 3, 2013 at 12:16

sumit

3322 silver badges7 bronze badges

Collectives™ on Stack Overflow

Set background image in CSS using jquery [duplicate]

7 Answers 7

Comments

3 Comments

1 Comment

2 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

3 Comments

1 Comment

2 Comments

1 Comment

Comments

Comments

Linked

Related