Help with CSS: Can't get images to show up as expected

[BKP1]

I'm using some custom code from another source that's no longer available for support.  So I'm left with trying to fix some issues myself. The code creates a carousel style team cards. I created a test site to work on it and is still in preview mode. Using the Code Editor, I've loaded some images in the Assets/image section; both jpg and png files. Here they are; please notice the filenames.

If everything was working correctly, the "yourimage.jpg" will show up in the preview site just above the person's name (see the preview link below-it will make sense once you see it). For some reason it's not showing up as expected.  The code that's controlling it is placed in the CSS main.less file.  I believe the important part of the code is as follows:

.ca-icon{

width:150px;

height:150px;

position:relative;

margin:0 auto;

background:transparent url(yourimage.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

background-size: cover;

}

The "yourimage.jpg",found in the parenthesis in the above code, is the actual name of the file and has been already loaded in the Assets/Image section. (There's similar code for the other images but I figure if I can solve the issue with the "yourimage.jpg" file, then I'll be able to solve the others).

After finishing the coding, I made sure I hit the save button in the Code Editor.  Any suggestions?  

Here's a link to the preview site.  I'm hoping someone can use the HTML editor to diagnose the problem.

http://helpingsites.loginportal.site/preview/26036d.mfl93g7fe7m4f.9f15d286555c143c9d13bc8c7a459852

Also, I believe the "url", in the above code, doesn't need to change in that it is acting as a generic placeholder so that irrespective of whichever website this is on, it will default (i.e., point) to that website's url.  Is this correct?

I've already confirmed that being in preview mode is not the issue.  I used the same code in a launched site and it didn't work there either.  Also (in a previous similar post) @Adam suggested that the image file name in the code may need to be files/theme/yourimage.jpg .  Using the original code (referenced above) I tried substituting yourimage.jpg with files/theme/youimage.jpg but that didn't make a difference.

I would appreciate any and all advice on how to fix this.

[NJRFTF]

@BKP 

Here's what the Console shows....

[BKP1]

Thanks @NJRFTF for chiming in. I'm not sure how to resolve the load error message. But not loading certainly explains why it's not showing up.  Maybe @Adam has some ideas. I wonder if it could be related to the account? 

Here's a screen shot of the console... similar error message

[BKP1]

@Adam Can you please look at the error codes?  Any ideas?

[BKP1 · Accepted solution]

@Adam I figured out the problem.  Your suggestion of how, in the CSS code, to reference the filepath for the images was "sort of" right, with a slight modification.

This is what ultimately worked:

background:transparent url(images/yourimage.jpg) no-repeat center center;

I found this link to be helpful. https://css-tricks.com/quick-reminder-about-file-paths/