Help - Search - Members - Calendar
Full Version: PRIDE - Text
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Alex Barlow
I want to replicate this rainbow text, but if I copy their HTML/CSS, my rainbow hovers above.

IPB Image

IPB Image

Please help recreate this
Christian J
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.