Как «контролировать фоновые элементы» в Website / WordPress?

Question

Я настраиваю сайт в WordPress (CMS). Я хочу добавить некоторые элементы на свой сайт в качестве фона дизайна.

Это выглядит примерно так:

Я нашел в Google и нашел способ сделать это - Использование инструмента построения в CMS - Elementor.

Хорошо, что в Elementor есть способ добавить background-img и контролировать background-position.

Плохо то, что я успешно добавил и управляю движением элемента до нужного мне места. Но элемент background, похоже, не может пересечь <section>, что означает, что они останутся только в своем собственном контейнере.

Я нашел другой способ сделать это, добавить <img> на текущей странице. Затем используйте position: absolute, чтобы правильно его расположить.

Но я предпочитаю так не делать.

Пример фрагмента:

#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

Проблема использования треугольников в качестве фонового изображения заключается в том, что вы никогда не сможете расположить их «вне» раздела. Фон является частью элемента и может доходить только до размеров элемента. Тем не менее, вы можете использовать псевдоэлемент и расположить его абсолютно так:

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