Как разместить фон так чтобы он заходил на другой блок?

Question

[katiiisha]

Есть такой вот кусок макета, и не понимаю как лучше поступить с зеленым огнем на фоне. Он должен заходить на верхний блок.
<section class="wrapper_last_page"></section>

.wrapper_last_page {
    background-image: url(/image/bg_last_page.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    height: 756px;
}

сейчас "огонь" прост растянулся на размер секции, как решить не понимаю

Comments

[Вадим]

ну вариантов несколько, выбирайте на свой вкус(то что больше подходит, так как контекста недостаточно):
1) Верхняя секция не имеет своего фона, имеет абсолютное\фиксированное или sticky позиционированием и на деле размещена поверх секции с огнём.
2) Второй вариант - верхняя секция всё так же не имеет своего фона, а огонь задан общему блоку, который оборачивает обе секции.
3) Ого как фоновая картинка задан обоим секциям и идеально спозиционирован так, что совпадает в единую картинку.

[szQocks]

мне кажется это просто дизайн кривой, огонь не должен выходить за пределы, ибо ссылки типа download our media kit - будут не кликабельные, уточнять у дизайнера над

[katiiisha]

Вадим, спасибо сделала по второму варианту и все получилось!

[katiiisha]

szQocks, да я просто тренируюсь, мне стало интересно, как такое реализовать, если именно так и было задумано

[ksnk]

Если вам хочется, чтобы огонь залезал поверх верхней секции и верхняя секция оставалась кликабельной - есть свойство pointer-events:none; в стилях.
В этом случае "огонь" - отдельный элемент с таким свойством и позиционированный с таким z-индексом как надо .

Answer 1

[AlexandraWeather]

Я бы скорее подумала, что это не фон, а изображение - там сверху оно перекрывает текстовый элемент. Мне кажется, что его можно абсолютно спозиционировать в блоке и пусть вылезает.

Answer 2

[macarov777]

попробуй поместить в один блок и на него поставить фотку огня