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

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>