# Custom Pattern Overlays on Container Backgrounds

**URL:** <https://community.sitejet.io/t/custom-pattern-overlays-on-container-backgrounds/116>\
**Category:** Share Code and Components\
**Tags:** cms\_code\
**Created:** [May 17, 2021, 1:47pm UTC](https://community.sitejet.io/t/custom-pattern-overlays-on-container-backgrounds/116 "2021-05-17T13:47:44Z")\
**Posts on this page:** 2\
**Page:** 1

<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:47pm UTC](https://community.sitejet.io/t/custom-pattern-overlays-on-container-backgrounds/116/1 "2021-05-17T13:47:44Z")

</div>

Hey SiteJetters!

The SiteJet pattern overlay for Banners is amazing! Sometimes, you may want to add your own custom patterns.

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

Then, add this code:

```auto
<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/) (or another pattern generator of your choice)

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

Step 7: Add Parallax to the HTML Background, or add `background-attachment: fixed` to either the image background or SVG background for some cool scrolling effects!

Have fun adding your own pattern overlays to your container backgrounds!

---

<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 17, 2024, 8:35am UTC](https://community.sitejet.io/t/custom-pattern-overlays-on-container-backgrounds/116/2 "2024-05-17T08:35:07Z")

</div>