How Can I Use Jquery To Replace Css Background Image And Maintain Gradient?

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

Solution 1:

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

<divclass="myClass">
    unchanged
</div><divid="changeMe"class="myClass">
    changed
</div>

And here is the JQuery

var elem = $("#changeMe");
var pattern = newRegExp(/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);