Как поставить картинку поверх прямоугольника?

Question

[leshka qwe]

Как поставить картинку поверх прямоугольника?

Прямоугольник:

<div class="image__of__section">
                
</div>

.image__of__section {
    width: 100%;
    height: 220px; 
    background-color: #0C0909;  
}

Надо сделать так, как на фото ниже:

Comments

[FeST1VaL]

Ну так сделайте, если не получается, еще раз пройдитесь по изучению CSS и так по кругу.

[leshka qwe]

FeST1VaL, я попросил помочь с решением проблемы, а не давать советы

[FeST1VaL]

Алексей Демченко, так проблемы нету... вы просите за вас сделать... вам нужен background-image свойство... каков вопрос таков ответ как бы... вот для чего вы скинули код? к какому блоку он относится? снизу темному? так тогда добавьте туда же тэг img. Спозиционируйте через position или через margin картинку в margin-top в минус и вперед. Ну это же базовые вещи, HTML и CSS не такие уж большие темы для базового изучения.

[leshka qwe]

FeST1VaL, Благодарю за ответ!

[Ankhena]

Что из этого "прямоугольник?". Белый? Черный? Бело-черный?

На скрине не видно, что выше и ниже. Т.е. не сделать вывод с чего-то это дизайнер решил так рисовать. А от этого зависит выбор решения.
Но вот несколько вариантов:
Градиенты.
Псевдоэлементы (и к ним, вероятно, грид).
Просто грид.
Отрицательные margin.
Позиционирование (несколько вариантов)