Image into text box?

Hi there,

I'm looking to add a range of custom brushstrokes to highlight different sections of text. Is there a way I can add these into a text block and move it to where I'd like it using css? Or would I have to place them in another way?

I've attached an example of what I'm looking for. Any help would be amazing and really appreciated! Thanks!

You can use Code Block + CSS 

or Text Block + CSS

CSS background Image, I guess so.

Can you provide 3 brushstrokes url?

Thank you and sure! They're very small files for the moment, we'll upload better ones later.

https://static1.squarespace.com/static/5e3aaef9b3593646244a2cc4/t/5e3ac9edf6fde46a48465f78/1580911085848/Untitled-2-02.png
https://static1.squarespace.com/static/5e3aaef9b3593646244a2cc4/t/5e3aca03d29b7f336bc42da8/1580911107204/Untitled-2-03.png
https://static1.squarespace.com/static/5e3aaef9b3593646244a2cc4/t/5e3aca0b69d6292afd79d6df/1580911115850/Untitled-2-04.png

3 hours ago, CassieMagpie said:

I'm looking to add a range of custom brushstrokes to highlight different sections of text. Is there a way I can add these into a text block and move it to where I'd like it using css?

Hi Cassie, what a brilliant idea. I love the graphics, colors and text, your mockup looks wonderful.

Rather than provide a long answer, I skimmed through this article on A List Apart and it looks promising indeed. It involves using some stying, perhaps, underlines, italic and bold to target words in a paragraph, stripping that style from being displayed and then respond to the areas of the text that are styled (but not visibly so) with your graphics.

Here is another resource on Andy Hooke's page.

After reading part of this thirty-eight visuals article I imagine that you could take some of Andy's approach and create three or four classes, one for each PNG and add 4 of these, one per stroke type to the global CSS.

First you need to upload the images, PNG or otherwise to your site, find their respective URLs and then …

In a code block you might add something like

<h1><span class="purple_underline">kids</span>express their emotions.</h1>

and for the classes to trigger the image load you could add this CSS to the same code block or insert the CSS in Design>Custom CSS if you intend to use it in several places across the site.

.blue_underline {
background: url(your image URL);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 8px 0;
}

.circle {
background: url(your image URL);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 8px 0;
}

.purple_underline {
background: url(your image URL);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 8px 0;
}

I think this will get you going. I've never done this before nor have I tested it but I believe that conceptually I am not far off. If you are truly stuck I can test it out.

Here is a code pen that use the <strong> tag as a trigger to place an stroked underline that looks like a brush stroke. So instead of a class it affects the text where the <strong> tag lives in the html.

The only thing I don't like is that the SVG gets masked (cut off). A solution to stretch it might be more desirable if it doesn't stretch it too far. For long underlines or strokes you may want to rely on a secondary image. This is why I prefer creating a class but it's yet one more method.