Мне нужно, чтобы фон для заголовка накладывался на декоративный элемент (жёлтый прямоугольник) так, чтобы при этом было видно задний фон всего header'а, подскажите, пожалуйста, как такое можно сделать? Вот мой код:
.header--background {
width: 100%;
height: 895px;
background-image: url(../image/background/background.jpg)
}
.header__title {
margin-right: 225px;
width: 280px;
height: 215px;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: end;
order: 2;
grid-area: header__title;
grid-column: 2/3;
grid-row: 2/3;
justify-self: end;
align-self: center;
}
.header__title--decoration {
width: 300px;
height: 380px;
background: transparent;
border: 10px solid #fde428;
order: 1;
grid-area: header__title;
grid-column: 2/3;
grid-row: 2/3;
justify-self: end;
align-self: center;
}
.title__item--1 {
background: #333;
}
P.S мне подсказали, что нужно сделать то же самое, но в песочнице, поэтому вот ссылка:
https://jsfiddle.net/Berl1ngo/5hazrx8t/20/
Я задаю вопрос на подобных площадках в первый раз, поэтому, если я что-то криво описал (я точно что-то криво описал), напишите также, пожалуйста, как мне в следующий раз исправить свои косяки. Заранее спасибо.
