What I wanted

So I am making a website for a client and she LOVES sunflowers, basically the only request she had for the site was to include sunflowers. When making the design I decided to add a sunflower border around the text in her "About Me" section and she loved it.

As I began to code her site, I wasn't completely sure how I was going to make it and couldn't find any definitive answers when searching for a solution so I decided to write this post so others may be able to find a way.

TLDR: How I did it

Container around text and image of border relatively positioned, picture of the border with a transparent background absolutely positioned inside of the container. That's it.

Here is a CodePen with an example:

HTML

Below is the HTML:

<div class='container>'>
<p>Filler Text</p>
<img src='https://svgshare.com/i/fRk.svg'/>
</div>

The HTML was very simple. All that is involved is a container, and inside of that container, there is the text and the image of the border.

CSS

Below is the CSS:

.container{
  position: relative;
  width: 50%;
}

img{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1
}

p{
  width: 300px;
  margin-top: 100px;
  margin-left: 60px;
  z-index: 10;
}

The container has a position property of relative(this is important so you can absolutely position the image inside of it). The image(border) is positioned absolutely within the container and the top: 0 and left: 0 declarations are to ensure that it is in the top-left-most part of the container. All of the declarations on the paragraph element are to make sure it is positioned inside of the border, if you have a different size border you'll have to play around with those and see what works for you.

Final Thoughts

Again, I made this post because I wanted to do a thing but couldn't find any tutorials or articles explaining how to do that thing so after I figured out how to do that thing I wrote this so others could read it and also know how to do that thing. Okay, that's all for this week. Thanks for reading, bye.