Adding various pictures depending on given value in Forums

I have two png pictures, which I want to add on the top of pictures, depending on what certain setting is applied on the certain profile. I found a decent tutorial which could help me, it is here: http://fmdesign.forumotion.com/t279-profile-field-for-custom-post-profiles

Now, it only says how to add borders, background-and text color to a certain picture. I found an other post here on Stackoverflow, but I don't have the faintest idea how to change it to suit my needs. The thread is here: Insert image object into HTML

Now, my code that I want to use looks like this (my browser doesn't throw any errors for me, but it can nevertheless be rich with inappropriate coding and bugs, I am new to scripts, please be patient with me):

var delikeret = document.getElementById("dkepkeret");
var eszakikeret = document.getElementById("ekepkeret");

function extraProfileImage() {
    var field = 'Hovatartozás';

    customProfile
        ({
            value: 'Észak',
            keret: eszakikeret,
        });

    customProfile
        ({
            value: 'Dél',
            keret: delikeret,
        });

customProfile({ value: '.*?', remove: True }); // remove field from profiles
function customProfile(o) {
                var reg = new RegExp('<span class="label"><span style="color:#[a-f0-9]{6};">'+field+'</span>\\s:\\s</span>(\\s|)'+o.value+'<br>','i');

    for (var i = 0, p = $('.postprofile, .user, .postdetails.poster-profile'); i < p.length; i++) {
        if (p[i].innerHTML.match(reg)) {
            if (o.remove) p[i].innerHTML = p[i].innerHTML.replace(reg, '');
        } else {
          p[i].style.backgroundImage: "url('" + o.keret + "')";
            //p[i].appendChild(o.keret);
            //p[i].style.background = o.keret;
            //p[i].style.backgroundPosition = "center center";
            //p[i].id = getElementById("o.keret");
        }
    }
}
}

var info = 'Plugin developed by Ange Tuteur for customizing post profiles. For help with this plugin, please see the following link : http://fmdesign.forumotion.com/t279-profile-field-for-custom-post-profiles';

$(document).ready(function() {
    extraProfileImage();
});

I would be glad to receive any help! PS: I have done everything else according to the Forumotion tutorial, although the images with "dkepkeret" and "ekepkeret" are stored elsewhere on the page, could that be a problem?

Thanks in advance!

So I could finally make my code free of bugs, here it is how it looks.

function extraProfileImage() {
    var field = 'Hovatartozás';

    customProfile
        ({
            value: 'Észak',
        });

    customProfile
        ({
            value: 'Dél',
        });

//customProfile({ value: '.*?', remove: true }); // remove field from profiles
function customProfile(o) {
                var reg = new RegExp('<span class="label"><span style="color:#[a-f0-9]{6};">'+field+'</span>\\s:\\s</span>(\\s|)'+o.value+'<br>','i');

    for (var i = 0, p = $('.postprofile, .user, .postdetails.poster-profile'); i < p.length; i++) {
        if (p[i].innerHTML.match(reg)) {
            if (o.remove) p[i].innerHTML = p[i].innerHTML.replace(reg, '');
        } else {
          if (o.value == "Észak") {
            p[i].classList.add("eszakikeret");
          } else if (o.value == "Dél") {
            p[i].classList.add("delikeret");
          }
        }
    }
}
}

var info = 'Plugin developed by Ange Tuteur for customizing post profiles. For help with this plugin, please see the following link : http://fmdesign.forumotion.com/t279-profile-field-for-custom-post-profiles';

$(document).ready(function() {
    extraProfileImage();
});

I had to set the .postprofile width to 210px so the border image doesn't stretch out for nothing.

The code added to my CSS is the following:

/* custom profile default*/ .postprofile, .user, .postdetails.poster-profile {
position: relative;
border:1px solid transparent;
padding:3px;
margin:3px;
z-index: 1;
}
/* ipb fix */ #ipbwrapper .postprofile {margin:0;
position: absolute;
top: 0;
left: 0;
}
.delikeret{
border-image-source: url(http://p.coldline.hu/2018/01/22/2748438-20180122-9sWitv.png);
border-image-slice: 20%;
border-image-outset: 10px;
border-image-width: 60px;
border-image-repeat: round;
}
.eszakikeret{ 
border-image-source: url(http://p.coldline.hu/2018/01/22/2748437-20180122-B8YiFj.png);
border-image-slice: 20%;
border-image-outset: 10px;
border-image-width: 60px;
border-image-repeat: round;
}

So I made it. If anyone would show future interest.