How to change background image of the css block using jquery

Question

<style type="text/css">
            .RadWindow .rwWindowContent .radalert
            {
                background-image:url("images/InfoImg.png"); 
            }
        </style>

The above code in css file ,i want change the background image of the above css file, when user call the Jquery costume function,I want to Change the background image of rad alert.

On a related note, three class selectors ? That could slow down page rendering. — Mark Broadhurst, May 17 '13 at 12:59

adeneo · Answer 1 · 2013-05-17T12:48:35.303

4

Use two classes :

<style type="text/css">
    .RadWindow .rwWindowContent .radalert {
         background-image:url("images/InfoImg.png"); 
    }
    .RadWindow.newbg .rwWindowContent .radalert {
         background-image:url("images/other_image.png"); 
    }
</style>

JS:

$('.RadWindow').addClass('newbg');    // adds the new background
$('.RadWindow').removeClass('newbg'); // removes the new background
$('.RadWindow').toggleClass('newbg'); // toggles the new background

edited May 17 '13 at 12:48

answered May 17 '13 at 12:35

adeneo

312,895
29
395
388

great answer, you should really mention jQuery's [.toggleClass()](http://api.jquery.com/toggleClass/) ability – SpYk3HH May 17 '13 at 12:38

Rohit Agrawal · Answer 2 · 2013-05-17T12:41:47.290

2

let suppose you have to change the url of the image to "images/InfoImg2.png" you can use the code option 1-

jQuery -

var newUrl = "images/InfoImg2.png";
$(".radalert").css({
    backgroundImage : 'url("'+newUrl+'")'
});

OR

CSS -

RadWindow .rwWindowContent .radalert2{
  background-image:url("images/InfoImg2.png"); 
}

jQuery -

$(".radalert").addClass("radalert2");

edited May 17 '13 at 12:41

answered May 17 '13 at 12:33

Rohit Agrawal

5,372
5
19
30

these are all good answers, though i have to go with the 2 class idead myself, as best suggestion – SpYk3HH May 17 '13 at 12:37

score 1 · Answer 3 · edited May 17 '13 at 12:49

1

Try this simple old fashioned method:

$(document).ready(function(){
    $('.RadWindow .rwWindowContent .radalert')
    .css('background-image', "url('images/InfoImg.png')");
})

OR

as per comment request, you could make use of jQuery's .toggleClass() method. To make best advantage, simple set 2 alternating background classes in css. Assign one to your element on load (write it in the HTML) and simply have the other one ready. Then, on an "action", use toggleClass to alternate the two classes!

Working Example

How it works is simple. First set up your CSS:

<style type="text/css">
    .bg-type-01 {
        background-image: url("some url");
    }
    .bg-type-02 {
        background-image: url("another url");
    }
</style>

Then apply your first class to your element:

<div class="radalert bg-type-01"> ... </div>

Finally, write the very simple JS with jQuery!

<script type="text/javascript">
    $(function() {
        $("something").on("click", function(e) {
            $(".radalert").toggleClass("bg-type-01 bg-type-02");
        });
    })
</script>

edited May 17 '13 at 12:49

SpYk3HH

22,272
11
70
81

answered May 17 '13 at 12:34

GautamD31

28,552
10
64
85

all good answers, but i gota point out, having 2 classes gives the editor the "toggle" ability without a bunch of extra code – SpYk3HH May 17 '13 at 12:37
The selector is not the same as the OP's one : there should be space between classes (ancestor selector) instead of commas (other selector)... – Samuel Caillerie May 17 '13 at 12:40
I thought that they are diff classes,sorry for that,I have edited those,Thanx – GautamD31 May 17 '13 at 12:41
@Gautam3164 ok right... – Samuel Caillerie May 17 '13 at 12:42
Can you consider the toggleClass also..?? – GautamD31 May 17 '13 at 12:42
@Gautam3164 gave ya a litle edit boost and fiddle! ;-P – SpYk3HH May 17 '13 at 12:49

score 1 · Answer 4 · answered May 17 '13 at 12:37

1

Try

$('.RadWindow .rwWindowContent .radalert').css('background-image', 'images/new.png')

answered May 17 '13 at 12:37

Arun P Johny

384,651
66
527
531

1

lol, you're late to the party, but here's a point anyway – SpYk3HH May 17 '13 at 12:38

How to change background image of the css block using jquery

4 Answers4

Working Example