Inspect your page's HTML tag. You may already have some classes at your disposal that you can use in your CSS. For example, this German translation has a course id (course.json) of "m05-de". It becomes a class on HTML. So this is another technique you can try in addition to the "lang" attribute (`"_defaultLanguage": "de"` in config.json) that Matt points out.
Thanks! Adding some codes for each language did the fix.
.introSection:lang(en) {
.c_intro_p3_left .nav-link-button{
margin-top: 0;
width: 325px;
height: 256px;
background-image: url("../../course/en/images/xxx.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;
}
.c_intro_p3_right .nav-link-button{
margin-top: 0;
width: 325px;
height:256px;
background-image: url("../../course/en/images/xxx.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;
}
}
.introSection:lang(de) {
.c_intro_p3_left .nav-link-button{
margin-top: 0;
width: 325px;
height: 256px;
background-image: url("../../course/id/images/xxx.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;
}
.c_intro_p3_right .nav-link-button{
margin-top: 0;
width: 325px;
height:256px;
background-image: url("../../course/id/images/xxx.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;
}
}