jquery and multiple css3 backgrounds

Question

trying to make a frustrating bit of code function correctly seeing as jquery doesn't include multiple background functionality yet.

I have an image whose background I need to add another to on an event. Unfortunately, when I do the event the background appears over the other one (good!) but the jquery code is refreshing the old image as well, making a white flash appear on the event.

Is there any way I could make this code function so that when the event is triggered, the old background remains and the new one is just added on?

$('#box').hover(function () {
    $('#slide').css("background", "url('bg_top.png') no-repeat center,
    url('bg_bottom.jpg') no-repeat center");
});

The event won't actually be a hover in the final version, just using for testing (so no css:hover stuff :-( )

Thanks for any help! :-)

Praveen · Accepted Answer · 2013-11-23 12:27:08Z

1

I would rather suggest you to use it separate in a separate class like

.hovered {
background: url('bg_top.png') no-repeat center,
            url('bg_bottom.jpg') no-repeat center;
}

JS:

$('#box').hover(function () {
    $('#slide').addClass('hovered');
}, function () {
    $('#slide').removeClass('hovered');
});

This won't affect the existing background.

answered Nov 23, 2013 at 12:27

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

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

1 Comment

shan Over a year ago

I actually realized I could just do it in another div and align it to the background image, much like this answer. Thanks for the response! Waiting for the day when jquery lets us animate multiple backgrounds >:(

Collectives™ on Stack Overflow

jquery and multiple css3 backgrounds

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related