# How can I insert a pattern

**URL:** <https://community.sitejet.io/t/how-can-i-insert-a-pattern/114>\
**Category:** Website Builder\
**Tags:** cms\_presets, cms\_code\
**Created:** [May 17, 2021, 11:56am UTC](https://community.sitejet.io/t/how-can-i-insert-a-pattern/114 "2021-05-17T11:56:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Markus\_Jorga](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/markus_jorga/32/47_2.png) [@Markus\_Jorga](https://community.sitejet.io/u/Markus_Jorga)\
**Post date:** [May 17, 2021, 11:56am UTC](https://community.sitejet.io/t/how-can-i-insert-a-pattern/114/1 "2021-05-17T11:56:09Z")

</div>

Hello all,

Can someone help me! I would like to have the pattern in a banner, which can also be set with a tick in the presets.

Many thanks and greetings  
Markus

 ![Muster](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/bb54c74fd10aee2501e8d126b8b16d47292ddfb0.png)

---

<div class="post-metadata">

**Author:** ![zachary](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/zachary/32/26_2.png) [@zachary](https://community.sitejet.io/u/zachary)\
**Post date:** [May 17, 2021, 12:56pm UTC](https://community.sitejet.io/t/how-can-i-insert-a-pattern/114/2 "2021-05-17T12:56:37Z")

</div>

Hi @Markus_Jorga !

Do you mean the exact pattern (crosshatch overlay) that some of the Header Presets have?

Or are you asking about a separate SVG pattern?

---

<div class="post-metadata">

**Author:** ![Markus\_Jorga](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/markus_jorga/32/47_2.png) [@Markus\_Jorga](https://community.sitejet.io/u/Markus_Jorga)\
**Post date:** [May 17, 2021, 1:00pm UTC](https://community.sitejet.io/t/how-can-i-insert-a-pattern/114/3 "2021-05-17T13:00:46Z")

</div>

> [@zachary](#):
>
> Do you mean the exact pattern (crosshatch overlay) that some of the Header Presets have?
> 
> Or are you asking about a separate SVG pattern?

Hi,  
yes exactly, I mean the one from the header preferences.

---

<div class="post-metadata">

**Author:** ![zachary](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/zachary/32/26_2.png) [@zachary](https://community.sitejet.io/u/zachary)\
**Post date:** [May 17, 2021, 1:20pm UTC](https://community.sitejet.io/t/how-can-i-insert-a-pattern/114/4 "2021-05-17T13:20:22Z")

</div>

Hmm…if the setting isn’t there for the preset banner, I’m not sure if it’s available.

But there may be a workaround:

Instead of ticking a box, and instead of setting a background image, \*\*set the background to **HTML**.

Then, add this code:

```
<div class="imageBG">
    <div class="patternBG">
    </div>
</div>
<style>
    .imageBG {
        width: 100%;
        height: 100%;
        background: url("[BACKGROUND IMAGE URL]");
    }
    .patternBG {
        background-image: "[SVG CODE HERE]";
        width: 100%;
        height: 100%;
    }
</style>

```

Step 1: Add that HTML background to the container/banner in question  
Step 2: Build the Pattern you like on [https://pattern.monster/](https://pattern.monster/)  
Step 3: **Copy SVG Code** from Pattern Monster (Note: set the background of the pattern to transparent, and the color of the svg itself to a desaturated grey to start)  
Step 4: Add desired Image url to code (you can get this from the media manager once uploaded)  
Step 5: Add the SVG code to the boilerplate code above  
Step 6: Add a background overlay in the editor tab to help blend the 2 together

[EXPLAINER VIDEO](https://www.loom.com/share/71572a5aaad64788a7c3b55c0d1f84e7)

---

<div class="post-metadata">

**Author:** ![Markus\_Jorga](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/markus_jorga/32/47_2.png) [@Markus\_Jorga](https://community.sitejet.io/u/Markus_Jorga)\
**Post date:** [May 17, 2021, 1:27pm UTC](https://community.sitejet.io/t/how-can-i-insert-a-pattern/114/5 "2021-05-17T13:27:21Z")

</div>

Thanks for the detailed info 👍

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [May 18, 2021, 9:13am UTC](https://community.sitejet.io/t/how-can-i-insert-a-pattern/114/6 "2021-05-18T09:13:55Z")

</div>

🔷 Moved to “Website Builder” as this is a CMS related request. ✅

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [June 28, 2021, 2:30pm UTC](https://community.sitejet.io/t/how-can-i-insert-a-pattern/114/7 "2021-06-28T14:30:21Z")

</div>