Isak Combrinck February 2016

Change background-image using jQuery addClass

Is it possible to change a css background using jQuery addClass? I am using the following code but it just stays on the initial background image.

HTML

<div id="background">
</div>

jQuery

$(document).ready(function() {
                for (var x = 10; x > 0; x--) {
                    $"#background").addClass(background2).delay(2000);
                    $("#background").removeClass("background2");
                    $("#background").addClass("background3").delay(2000);
                    $("#background").removeClass("background3").delay(2000);
                };
            });;

CSS

#background {
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    background-image: url(backgroundimage1.JPG);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.background1 {
    background-image: url(backgroundimage1.JPG);
}

.background2 {
    background-image: url(backgroundimage2.JPG);
}

.background3 {
    background-image: url(backgroundimage3.JPG);
}

Answers


MysterX February 2016

You need to write proper CSS-rules. Now their priority doesn't let you to see the changes. Write like this

#background {
    background-image: url("backgroundimage1.JPG");
}

#background.background1 {
    background-image: url(backgroundimage1.JPG);
}

#background.background2 {
    background-image: url(backgroundimage2.JPG);
}

#background.background3 {
    height: 20%;
    background-image: url(backgroundimage3.JPG);
}


Rory McCrossan February 2016

You have two issues here. Firstly you're adding classes and instantly removing them as delay does not have an effect on the css() method. To achieve what you require you could use setInterval instead. Secondly, you need to increase the specificity of the backgroundX classes so they override the default styles on the #background element. Try this:

var count = 0;
var classes = [ 'background1', 'background2', 'background3' ];

function updateBackground() {
    $('#background').removeClass(classes.join(' ')).addClass(classes[count % classes.length]);
    count++;
}

setInterval(updateBackground, 2000);
#background.background1 {
    background-image: url(backgroundimage1.JPG);
}

#background.background2 {
    background-image: url(backgroundimage2.JPG);
}

#background.background3 {
    height: 20%;
    background-image: url(backgroundimage3.JPG);
}

Working example

Note the example is using background-color but the principle is the same.


pincfloit February 2016

As others have said, that's because IDs always have a higher specificity than classes.

While you can do what the other answers suggest (#background.background1 and so on), I'd recommend using the ID only for jQuery targeting and avoid using IDs in your CSS files, since it doesn't have any advantage over using a class and it has many disadvantages (no reusability, specificity issues…). See why you should avoid IDs in yous CSS files

Post Status

Asked in February 2016
Viewed 1,377 times
Voted 7
Answered 3 times

Search




Leave an answer