How to `control background elements` in Website / WordPress? - html

Question

I am customising a website in WordPress(CMS). I want to add some elements in my website as background design.
It look something similar like this:
I google and found a way to do it - Using a builder tool in CMS - Elementor.
The good thing is, in Elementor there is a way to add background-img and control background-position.
The bad thing is, I have successfully added and control the element moving around until the place that I want. But The background element seems cannot cross the <section> which mean they will only stay in their own container.
I figured it out another way to do it, which is add the <img> at the current page. Then use position: absolute to position it properly.
But I prefer not to do that way.
Example snippet:
#section-1 {
background-color: #000;
width: 100%;
height: 200px;
color: white;
padding: 20px;
}
#section-2 {
background-color: yellow;
background-image: url(https://temp1.asign.pro/wp-content/uploads/2019/05/element-2.png);
background-position: -150px -223px;
background-repeat: no-repeat;
width: 100%;
height: 200px;
color: black;
padding: 20px;
}
<section class="section" id="section-1"></section>
<section class="section" id="section-2"></section>

Answer 1

The issue with using the triangles as a background-image is that you'll never be able to position them 'out' of the section. The background is a part of the element and can only go as far as the element's dimensions. However, you can make use of the pseudo element and position them absolutely, like so:
#section-1 {
background-color: #000;
width: 100%;
height: 200px;
color: white;
padding: 20px;
overflow: visible;
}
#section-2 {
background-color: yellow;
width: 100%;
height: 200px;
color: black;
padding: 20px;
overflow: visible;
position: relative;
}
#section-2::before{
content: '';
position: absolute;
top: -70px;
left: 0;
width: 200px;
height: 200px;
background: url(https://temp1.asign.pro/wp-content/uploads/2019/05/element-2.png) no-repeat center center/100%
}
<section class="section" id="section-1"></section>
<section class="section" id="section-2"></section>