CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3290485
user3290485

Reputation: 55

Change background-img color with jquery?

So, I have the css below on my page. I want my visitors to be able to change the color of that image by typing in a #colorcode in a text field. Is something like this even possible?

.button{
    background-image:url(../pattern/_img/button.png);
    background-repeat:no-repeat;
    display:block;
    width:53px;
    height:53px;
    float:left;
    margin:16px;
    -ms-touch-action: none;
}

Upvotes: 0

Views: 743

Answers (1)

Rofez
Rofez

Reputation: 221

What you can do is to change your image. Take a PNG image with white outside and empty (but let your gradient) inside like this for you: mug

Then set a div behind the image. It's the background-color of that div which will change. In your js just set:

element.style.backgroundColor = document.getElementById('color').value;

This not use canvas but this is working with few code.

Here is the JSFiddle.

Sorry for the english and hope it will help you!

Ah, and the image above is here.

Upvotes: 4

Related Questions