Problem:
Translate an image into secondary language, while the image is set through CSS as a background image.
Solution:
1. As you are using pseudo-element ::after, you can duplicate and modify your CSS to add :lang(...) pseudo-class selector for the translated version, in your style.css file something like this:
.visual-section .col2:lang(es):after{
content:'';
position:absolute;
left:50%;
top:22px;
z-index:2;
background:url(../images/bg-or-es.png) no-repeat;
width:279px;
height:45px;
margin:0 0 0 -225px;
}
2. Create a new image for translated version of the page (e.g: bg-or-es.png) and add it into your new duplicated css (e.g: background:url(../images/bg-or-es.png) no-repeat;).
3. You also need to add the new CSS class or attributes to the appropriate < div > for that element (image). So there will be two divs for your element.
As shown in this example: https://developer.mozilla.org/en-US/docs/Web/CSS/:lang
Example code from above link:
<div lang="en"><q>Your English text or html goes here.</q></div>
<div lang="es"><q>Your Spanish text or html goes here.</q></div>
Relevant Documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/:lang
https://www.w3.org/International/questions/qa-css-lang
