How can I insert a pattern

Helpdesk Website Builder
,
1

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
Muster333Ă—898 24.3 KB

1 Like
2

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?

1 Like
3

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

1 Like
4

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

4 Likes
5

Thanks for the detailed info :+1:

4 Likes
6

:large_blue_diamond: Moved to “Website Builder” as this is a CMS related request. :white_check_mark:

1 Like