How can I use JQuery to replace CSS background image and maintain gradient?

Question

I am trying to dynamically replace the background-image property of a div while maintaining the other background related properties (such as color and gradient) using jQuery's .css() function. So far I can replace the image, but then I lose the other properties. How can I do this without losing the other CSS background properties?

CSS

.myClass{
    width:100px;
    height:100px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/b/b9/Hookem_hand.gif) center no-repeat, repeating-linear-gradient(135deg, transparent, transparent 3px, rgb(102, 102, 102) 3px, rgb(102, 102, 102) 6px), linear-gradient(rgb(51, 51, 51), rgb(153, 153, 153));
    color:white;
    text-align:center;
}

JS/JQuery

var elem = $("#changeMe");
var pattern = new RegExp(/url\(https?:[^,]*\)/);
var background = elem.css("background");
var replacementImage = "url(http://upload.wikimedia.org/wikipedia/commons/d/d1/Circle-question.png)";

var match = background.match(pattern);
console.log(match);

var updatedBG = background.replace(pattern,replacementImage);
console.log(updatedBG);

// elem.css({"background-image":replacementImage}); //this removes the other backgroud css such as gradient and color
elem.css({"background":updatedBG}); //this does not have any effect on the div

HTML

<div class="myClass">
    unchanged
</div>
<div id="changeMe" class="myClass">
    changed
</div>

I have a JSFiddle that demonstrates what is happening: http://jsfiddle.net/joedegiovanni/2ns61st9/4/

Is there a way to do this properly so the other background properties are not lost? I am not sure why this doesn't work.

Thanks for your help in advance.

Allan · Accepted Answer · 2014-09-03 18:18:04Z

Here is an updated version of your jsfiddle.

http://jsfiddle.net/2ns61st9/5/1

I don't know why you need that regular expression there, but it's messing up with the variable's value when you use the regular expression pattern.

Take a look to my modifications.

The main issue was that the background image and the background pattern where using the same css attribute, so when you where replacing the attribute's value you where killing the background pattern.

As you can see, I basically added that background pattern into an additional variable and then I'm merging both together., Then I set the background-image attribute.

In the example is working. Please let me know if this works for you!

No additional css classes were created, I just modified yours a little bit.

Here is the CSS

.myClass{
    width:100px;
    height:100px;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b9/Hookem_hand.gif),repeating-linear-gradient(135deg, transparent, transparent 3px, rgb(102, 102, 102) 3px, rgb(102, 102, 102) 6px), linear-gradient(rgb(51, 51, 51), rgb(153, 153, 153));
    color:white;
    text-align:center;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
}

Here is the HTML

<div class="myClass">
    unchanged
</div>
<div id="changeMe" class="myClass">
    changed
</div>

And here is the JQuery

var elem = $("#changeMe");
var pattern = new RegExp(/url\(https?:[^,]*\)/);
var background = elem.css("background");
var replacementImage = "url(http://upload.wikimedia.org/wikipedia/commons/d/d1/Circle-question.png)";
var bgpattern = ", repeating-linear-gradient(135deg, transparent, transparent 3px, rgb(102, 102, 102) 3px, rgb(102, 102, 102) 6px), linear-gradient(rgb(51, 51, 51), rgb(153, 153, 153))";

var match = background.match(pattern);
console.log(match);

var updatedBG = background.replace(pattern,replacementImage);
console.log(updatedBG);

replacementImage = replacementImage + bgpattern;

elem.css("background-image", replacementImage);

Collectives™ on Stack Overflow

How can I use JQuery to replace CSS background image and maintain gradient?

CSS

JS/JQuery

HTML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

CSS

JS/JQuery

HTML

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related