Custom Pattern Overlays on Container Backgrounds

Community Share Code and Components
1

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:

<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/ (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!

3 Likes