1

How I can use this effect in a readme.md file ?

 <h1>Welcome</h1>

h1 {
    background-image: url(./image.gif);
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

Here is what Im getting when I write directly html and css in readme readme screenshot

john zash
  • 13
  • 3

1 Answers1

1

You simply enclose the css with tags.

Should render correctly with the majority of markdown parsers.

<h1>Welcome</h1>

<style>
h1 {
    background-image: url(./image.gif);
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
</style>

On GitHub.com this trick sadly does not work. This is due to their sanitization process. "The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes."

Read more at:

https://github.com/orgs/community/discussions/22728

https://stackoverflow.com/a/51956450/16512927

Miky
  • 11
  • 3
  • Hey, just tried but its not working. I edited my main post to show you what Im getting with github – john zash Nov 13 '22 at 21:31
  • 1
    Ohh... this is a Readme.md on GitHub. Sorry, It's to my understanding that css is blacklisted for security reasons. See this thread for more info: https://stackoverflow.com/a/51956450/16512927 – Miky Nov 13 '22 at 21:48