Difference between img and content:

I have been developping for some time a character sheet where I want to put a lot of icons, and I had not bothered yet to put them on the Github repo. I was working with temporary icons found online, with the idea at some point to upload a nice set of Creative Commons icons on the Github repo. In the meantime, to be ready to make this update and have all at the same place in the CSS? I had created a serie of classes with URL .sheet-icon-agressive{ &nbsp;content : &nbsp;url(<a href="https://s3.amazonaws.com/files.d20.io/images/19/Vp6EsSd3aGqqL78ZPmw1WQ/max.png?1575370629" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/19/Vp6EsSd3aGqqL78ZPmw1WQ/max.png?1575370629</a>); } /*License Information*/ with a &lt;span class="icon-agressive"&gt;&lt;/span&gt; I had my image display in the span with no issue. I had already noticed that some of the CC icons I as selecting as temporary were not always working, but didn't bother as it was temporary. Now, I have finally an upload of the icons, and I was looking to update all these .sheet-iconXXXX classes but it doesn't work. If I change the class to, the span doesn't display anymore .sheet-icon-agressive{ &nbsp;content : &nbsp;url(<a href="https://raw.githubusercontent.com/ChrisDDickey/roll20-character-sheets/Earthdawn-Images/Earthdawn%20(FASA%20Official)/Images/Agressive.png" rel="nofollow">https://raw.githubusercontent.com/ChrisDDickey/roll20-character-sheets/Earthdawn-Images/Earthdawn%20(FASA%20Official)/Images/Agressive.png</a>); } I thought it could be something wrong with the way Github is hosting, but the same url used with img works just fine &lt;img src="<a href="https://raw.githubusercontent.com/ChrisDDickey/roll20-character-sheets/Earthdawn-Images/Earthdawn%20(FASA%20Official)/Images/Agressive.png" rel="nofollow">https://raw.githubusercontent.com/ChrisDDickey/roll20-character-sheets/Earthdawn-Images/Earthdawn%20(FASA%20Official)/Images/Agressive.png</a>"&gt; currently 57 such classes and 159 instances in my HTML !! God help me (yes I'll call "god" whoever explains me the difference between {content: url()} and having the actual &lt;img src=""&gt; &nbsp;as I can't see any sensible explanation on this by google searches

I think content &nbsp; is supposed to only be used with the pseudo-elements ::before and ::after. You might try changing your css class to include before/after ie&nbsp;.sheet-icon-agressive::after Also, have your tried just using background: url(...) instead of content?

Nope... img works background-image doesnt content doesnt even with ::before

Did you try setting the background of the element (not background-image, although it probably shouldn't matter...)? I have successfully used github urls directly like this; background: url("<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/</a> X ); X=character sheet's path on the server. Maybe there is an issue trying to host the image from your fork vs roll20's master repo...&nbsp; Not sure.

I tried to get in the Roll20 repo and identify any image present here... Same issue. background and background-image give the same result (.e. nothing) What s strange is that there is different results depending on the hosting site... <a href="https://raw.githubusercontent.com/Jiboux/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Agressive.png" rel="nofollow">https://raw.githubusercontent.com/Jiboux/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Agressive.png</a> &nbsp; <a href="https://s3.amazonaws.com/files.d20.io/images/19/Vp6EsSd3aGqqL78ZPmw1WQ/max.png?1575370629" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/19/Vp6EsSd3aGqqL78ZPmw1WQ/max.png?1575370629</a> First doesn't work, but second works just fine

As a test, are you able to use this image/url (earthdawn logo)&nbsp; <a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG</a>

Please consult this page for working examples: <a href="https://wiki.roll20.net/Image_use_in_character_sheets" rel="nofollow">https://wiki.roll20.net/Image_use_in_character_sheets</a> if you find something odd that isnt covered by it, please contribute to the page

To vince, it can't work with the direct github link you gave. It should be&nbsp; <a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG</a> With this I made&nbsp; URL :img: &lt;img src="<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG</a>" width="30" &gt; class: &lt;span class="icon-agressive " width="30"&gt;&lt;/span&gt; CSS :.sheet-icon-agressive{ &nbsp;content : &nbsp;url(<a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG</a>); } The img displays; but not the class (also tried with :before) The same code, where I only change the url of the image for works fine for both&nbsp; <a href="https://s3.amazonaws.com/files.d20.io/images/19/Vp6EsSd3aGqqL78ZPmw1WQ/max.png?1575370629" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/19/Vp6EsSd3aGqqL78ZPmw1WQ/max.png?1575370629</a> &nbsp; @Andreas J. : I find something odd, and would be happy to contribute... If I found the solution :):) In the other end, I see in the wiki they use background-image, and with the example of ambition&amp; avarice I do realize that when I tried with background image I had not fixed dimension... I just made a try, and it seems I would be able to salvage my code using the same strategy as them... So if there is any contribution, it is content: url() doesn't work with github hosted images :) :)&nbsp;

So on the good advice of Andres J, I got closer to something from the Wiki, and remade my class inspired by the Ambition and Avarice Example: .sheet-icon-agressive{&nbsp; background-image :&nbsp; url(<a href="https://raw.githubusercontent.com/rolL20/roll20-character-sheets/master/Ambition_Avarice/images/d20.png" rel="nofollow">https://raw.githubusercontent.com/rolL20/roll20-character-sheets/master/Ambition_Avarice/images/d20.png</a>); &nbsp; background-size: 20px 20px; &nbsp; background-repeat: no-repeat; &nbsp; width: 20px; &nbsp; height: 20px; &nbsp; display: inline-block; &nbsp; } /*License Information*/ It works with the ambition and avarice image on the roll20 repo, good !!! It also works on the same image, from my own forked repo... Interesting... But it doesn't work with the Earthdawn logo that is on the roll20 depo... Where is the difference ?!?! background-image :&nbsp; url(<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG</a>)

It s really to get crazy... I have continued to make tests opening random folders in the repo, and trying to use them in my CSS... Most work but some don't, without any clue what can be the difference between those that do and those that don't: Work: <a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Guildes%20QdO/Guildes_qdo.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Guildes%20QdO/Guildes_qdo.png</a> <a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Cyberspace/Cyberspace.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Cyberspace/Cyberspace.png</a> <a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blue%20Rose/Blue%20Rose.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blue%20Rose/Blue%20Rose.png</a> <a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/COPS/COPS.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/COPS/COPS.png</a> Don't work <a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/AS%26SH/assh_cs_logo.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/AS%26SH/assh_cs_logo.png</a> &nbsp;(Does something different, instead of not displaying, shows some kind of replacement image that is an image behind a forbidden sign) <a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/3D%26T_ALPHA/images/logo.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/3D%26T_ALPHA/images/logo.png</a> &nbsp;(idem) And off course the earthdawn one...

Well I made a very simple HTML that demonstrates the problem... Exact same code, links that look exactly the same in 3 different folders of Github... And one that doesn't display, when all other do... Is there any parameters/rights that you setup folder per folder ??? &lt;!DOCTYPE html&gt; &lt;meta charset="UTF-8"&gt; &lt;style&gt; &nbsp; .icon{ &nbsp; &nbsp;background-size: 20px 20px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; width: 20px; &nbsp; &nbsp; height: 20px; &nbsp; &nbsp; display: inline-block; &nbsp; } .EDPNG {background-image: url(<a href="https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG" rel="nofollow">https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG</a>);} .AA {background-image: &nbsp; &nbsp;url(<a href="https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Ambition_Avarice/images/d20.png" rel="nofollow">https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Ambition_Avarice/images/d20.png</a>);} .DW {background-image: &nbsp; &nbsp;url(<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/DungeonWorld/DungeonWorld.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/DungeonWorld/DungeonWorld.png</a>);} &lt;/style&gt; EDPNG_img: &lt;img src="<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Earthdawn%20(FASA%20Official)/Earthdawn.PNG</a>" width="30" &gt;&lt;br&gt; EDPNG_class: &lt;span class="EDPNG icon" width="30"&gt;&lt;/span&gt;&lt;br&gt; AA_img: &lt;img src="<a href="https://raw.githubusercontent.com/rolL20/roll20-character-sheets/master/Ambition_Avarice/images/d20.png" rel="nofollow">https://raw.githubusercontent.com/rolL20/roll20-character-sheets/master/Ambition_Avarice/images/d20.png</a>" width="30" &gt;&lt;br&gt; AA_class: &lt;span class="AA icon " width="30"&gt;&lt;/span&gt;&lt;br&gt; DW_img: &lt;img src="<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/DungeonWorld/DungeonWorld.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/DungeonWorld/DungeonWorld.png</a>" width="30" &gt;&lt;br&gt; DW_class: &lt;span class="DW icon " width="30"&gt;&lt;/span&gt;&lt;br&gt;

Finally Got it !!! Not a problem of different behaviour betwee content and img, but a problem of different parsing of special characters between CSS and HTML... If you look above, common points between all the adresses that don't work is that they have a special character that is not the space %20... I hadn't even figured but in HTML, the URL is between "" so it doesn't matter for () being in the adress, but the CSS has the url in ()... So the brackets in the URL were the problem and this works <a href="https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Earthdawn%20" rel="nofollow">https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Earthdawn%20</a> %28 FASA%20Official %29 /Earthdawn.PNG

Jiboux said: Finally Got it !!! Not a problem of different behaviour betwee content and img, but a problem of different parsing of special characters between CSS and HTML... I was starting to suspect some of those less stellar urls might be the problem... Just one of the reasons why all roll20 files in the repo should have only alphanumericals in the names, and no spaces. That would avoid lots of headache like this. Wanna add a note about this url business to the wiki page?

That could be an idea... Can I contribute directly ? I suspected it too, but first looked at the %20 for the space... Then making tests with images on other folders I came across one with the %20 that worked so I stopped thinking about special characters... I am revamping a sheet developped by someone else, so I took the repo name he took... My first reaction to him as a joke has been "whyyyyyyy". :)

Yeah, just got to the page, and then press "edit" next to one of the sections and you can edit the page, or at the top of teh page there is a separate "edit" button for the full page. <a href="https://wiki.roll20.net/Image_use_in_character_sheets" rel="nofollow">https://wiki.roll20.net/Image_use_in_character_sheets</a> You don't have to worry about how the end result looks, I can swing by later and do formatting. :)

OK, it feels so stupid to put in a Wiki (was a stupid mistake, but made me loose a day :) )

Now that I think of it... I had a similar image issue when moving images from imgur to github for the "ad&amp;d 1e" sheet.&nbsp; I ended up changing the sheet's root folder to "ADnD_1E" linking issues.