If you are having a notice about writing the .mo files please read this doc

Hi, Amit here, I am the WPML Support Manager, our current ticket queue is high, update your WPML plugins and make sure you meet the minimal requirements for running WPML before reporting an issue please - many tickets are resolved doing that

Please look at our updated list of Known Issues and you can also use our support search to find helpful information and of course review our documentation before opening a ticket.

If you do need to open a ticket please make sure to provide us with all the needed information as described in this page

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This thread is resolved. Here is a description of the problem and solution.

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

This topic contains 5 replies, has 2 voices.

Last updated by Noman 2 years, 10 months ago.

Assigned support staff: Noman.

Author Posts
January 17, 2017 at 1:06 am #1183426

carlyT

I am trying to: Translate the "or" graphic for the Spanish version of the site.

URL of (my) website where problem appears:hidden link

I expected to see: a different graphic for the translated site

Instead, I got:

Steps to duplicate the issue:

January 17, 2017 at 9:53 am #1183662

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Carly,

Thank you for contacting us. As you are using pseudo-element ::after, you can try to duplicate and modify your CSS for 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;
}

- Please note that you also need to 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;).

- We have another user who was able to solve the same issue like this:
https://wpml.org/forums/topic/how-can-i-translate-content-written-in-css-in-pseudo-after/

- Some useful docs for your info:
hidden link
hidden link

Please try it and let us know how it goes, have a great day.
Thank you

January 18, 2017 at 6:34 pm #1185318

carlyT

Hi Norman,
Thank you for your reply. I've added this code to my stylesheet and added a translated image to the image folder, but had no luck replacing the English image with the Spanish image.

January 19, 2017 at 10:27 am #1185777

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello Carly,

Thank you for getting back to us.

1. How are you adding this image into your page, either through a PHP file or through WordPress page editor?
- 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: hidden link

Example code from above link:

<div lang="en"><q>Your English text or html goes here.</q></div>
<div lang="es"><q>Your French text or html goes here.</q></div>

2. Also other simpler approach would be to add this image directly into your page content or page template and not through the CSS background property.

Thank you

January 19, 2017 at 4:23 pm #1186233

carlyT

Thank you so much for your help, that worked perfectly!

January 19, 2017 at 5:50 pm #1186298

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hey Carly,

Happy to hear that it solved the issue and I was able to help you out in this.

Have a great day,
Thank you