Menu Close

Custom Text Highlighting with CSS

Some websites do different things to highlight specific text phrases. This could be text that the user should pay attention at (like a warning), or is just very important (like an item price). I was curious on how to do that.

The solution is very simple: via CSS, background image and inline span. First, you need to create the image that you want to put as a highlight behind your text. I just used Gimp and a brush tool until I was okay with the result. The image has to be exported as a scalable vector graphic (svg).

After the image is created, you could either keep it as a file or convert it to a base64 string to be used within css. Important is, that the background-image resizes by covering the element, does not repeat and is centered.

With some additional padding you can adjust the free space of the image a bit.

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × 5 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.