Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ PRIDE - Text

Posted by: Alex Barlow Jul 18 2020, 02:40 PM

I want to replicate this rainbow text, but if I copy their HTML/CSS, my rainbow hovers above.

IPB Image

Please help recreate this

Posted by: Christian J Jul 18 2020, 03:22 PM

I'd try using a CSS background-image for the text, something like:

CSS

CODE

span.pride {
color: #fff;
background: #000 url(pride.gif) repeat-x;
background-size: auto 100%;
}

HTML

CODE

<p>lorem <span class="pride">ipsum</span> dolor</p>

The background-image is sized to fit the height of the HTML element ; but is made to repeat horizontally, since I don't know the length of the text. I also use a black background-color so that the white foreground-color won't become unreadable if the image fails to load.