How to invert colors in the background image of an HTML element?

Question

I have the following div :

 <div style="border-radius:50%; height:233px; width:423px; background-color:black; background-image:url(image2.gif);background-repeat:repeat; border:solid 1px; filter: invert(100%);-webkit-filter: invert(100%);"></div> 

Now I need to invert the colors of the background image so that it looks like this:

I tried to use

filter: invert(100%); -webkit-filter: invert(100%);

but it inverts the entire div , including the border, which looks like this:

How can I invert the colors of only the background image and not the whole element?

Note. The above div programmatically generated. The solution for inverting the border color will also require me to change the program to invert the border color, which can be in any format (hex, rgb, rgba, hsl, hsla, words, etc.), in fact, inflating my code. However, if there is no other option for me, I would do it, but first I hope that I can find a simpler solution.

Answer 1

You can set the background in a pseudo-element and save the border in a div.

Thus, the filter will not affect the main element.

 div { border-radius:50%; height:233px; width:423px; border:solid 1px green; overflow: hidden; position: relative; } div:after { content: ""; position: absolute; width: 100%; height: 100%; background-color:black; background-image:url(http://i.stack.imgur.com/xQi3T.png); background-position: -21px -35px; background-repeat:repeat; filter: invert(100%); -webkit-filter: invert(100%); } 

 <div></div>