CODEWITHSUNDEEP
javascriptjqueryhtmlcssbackground-image
Joe Degiovanni
Joe Degiovanni

Reputation: 205

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() 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.

Upvotes: 1

Views: 522

Answers (1)

Allan
Allan

Reputation: 261

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);

Upvotes: 1

Related Questions