Попробовал все возможные инструменты (и ноль), для того, чтобы поверх фона-картинки (backgraund) поставить backgraund .png и отцентровать его рядом с моим блоком (для дальнейшей адаптации).
Подскажите, как же это сделать? Последний раз пытался по этой статье https://snipp.ru/html-css/multiple-backgrounds
.about-this {
display: flex;
position: absolute;
box-sizing: border-box;
margin-top: 330px;
}
.this {
background: rgba(255, 255, 255, 67%);
width: 627px;
border-radius: 5px;
box-sizing: border-box;
}
.this-text {
padding: 41px 64px 0 58px;
}
h2 {
font-family: 'Ubuntu', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 41px;
text-transform: uppercase;
margin: 0;
}
.p-this {
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 138.9%;
}
.block-this-teg {
padding: 60px 58px 50px 65px;
}
.all-this-teg {
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.check-svg {
width: 100px;
}
.check-svg2 {
width: 67px;
}
.check-svg3 {
width: 74px;
}
.title {
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 21px;
margin: 0;
}
.text-this {
font-family: Ubuntu;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 131.9%;
margin-top: 9px;
}
.this-teg {
margin-left: 22px;
}
.wrapper-background-iphone {
background: url('https://gulaytour.ru/wp-content/uploads/2017/07/x4kFg.jpg');
height: 1133px;
background-color: rgba(58, 51, 16, 37%);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper-background-iphone::after {
content: '';
background: url('https://mybox.ru/bitrix/templates/bootstrap_s1/img/main/phoneframe.png') no-repeat;
display: block;
width: 212px;
height: 200px;
position: absolute;
top: 80px;
left: 314px;
}
.background-phone-ur-this {
display: flex;
position: absolute;
box-sizing: border-box;
}
.background-phone-h3 {
top: 650px;
position: absolute;
font-style: normal;
color: white;
font-weight: 700;
font-size: 40px;
line-height: 46px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 0;
}
<div class="wrapper-this-background" style="">
<div class="about-this">
<div class="this">
<div class="this-text">
<h2>
Компания -
это
</h2>
<p class="p-this">
Текст описание
</p>
</div>
<div class="block-this-teg">
<div class="all-this-teg">
<svg class="check-svg" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5625 31.7188C5.69226 31.7188 4.85766 31.373 4.24231 30.7577C3.62695 30.1423 3.28125 29.3077 3.28125 28.4375V6.5625C3.28125 5.69226 3.62695 4.85766 4.24231 4.24231C4.85766 3.62695 5.69226 3.28125 6.5625 3.28125H24.0625C24.3526 3.28125 24.6308 3.39648 24.8359 3.6016C25.041 3.80672 25.1562 4.08492 25.1562 4.375C25.1562 4.66508 25.041 4.94328 24.8359 5.1484C24.6308 5.35352 24.3526 5.46875 24.0625 5.46875H6.5625C6.27242 5.46875 5.99422 5.58398 5.7891 5.7891C5.58398 5.99422 5.46875 6.27242 5.46875 6.5625V28.4375C5.46875 28.7276 5.58398 29.0058 5.7891 29.2109C5.99422 29.416 6.27242 29.5312 6.5625 29.5312H28.4375C28.7276 29.5312 29.0058 29.416 29.2109 29.2109C29.416 29.0058 29.5312 28.7276 29.5312 28.4375V17.5C29.5312 17.2099 29.6465 16.9317 29.8516 16.7266C30.0567 16.5215 30.3349 16.4062 30.625 16.4062C30.9151 16.4062 31.1933 16.5215 31.3984 16.7266C31.6035 16.9317 31.7188 17.2099 31.7188 17.5V28.4375C31.7188 29.3077 31.373 30.1423 30.7577 30.7577C30.1423 31.373 29.3077 31.7188 28.4375 31.7188H6.5625Z" fill="#1A2B48"></path>
<path d="M18.2744 22.6498L33.5869 7.33728C33.6885 7.23559 33.7692 7.11486 33.8242 6.98199C33.8793 6.84913 33.9076 6.70672 33.9076 6.5629C33.9076 6.41909 33.8793 6.27668 33.8242 6.14382C33.7692 6.01095 33.6885 5.89022 33.5869 5.78853C33.4852 5.68684 33.3644 5.60617 33.2316 5.55114C33.0987 5.4961 32.9563 5.46777 32.8125 5.46777C32.6687 5.46777 32.5263 5.4961 32.3934 5.55114C32.2605 5.60617 32.1398 5.68684 32.0381 5.78853L17.5 20.3288L11.7119 14.5385C11.6102 14.4368 11.4894 14.3562 11.3566 14.3011C11.2237 14.2461 11.0813 14.2178 10.9375 14.2178C10.7937 14.2178 10.6513 14.2461 10.5184 14.3011C10.3855 14.3562 10.2648 14.4368 10.1631 14.5385C10.0614 14.6402 9.98074 14.7609 9.92571 14.8938C9.87067 15.0267 9.84235 15.1691 9.84235 15.3129C9.84235 15.4567 9.87067 15.5991 9.92571 15.732C9.98074 15.8649 10.0614 15.9856 10.1631 16.0873L16.7256 22.6498C16.8272 22.7516 16.9479 22.8324 17.0808 22.8876C17.2137 22.9427 17.3561 22.9711 17.5 22.9711C17.6438 22.9711 17.7863 22.9427 17.9192 22.8876C18.0521 22.8324 18.1728 22.7516 18.2744 22.6498Z" fill="#1A2B48"></path>
</svg>
<div class="this-teg">
<p class="title">
Заголовок
</p>
<p class="text-this">
Описание
</p>
</div>
</div>
<div class="all-this-teg">
<svg class="check-svg2" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5625 31.7188C5.69226 31.7188 4.85766 31.373 4.24231 30.7577C3.62695 30.1423 3.28125 29.3077 3.28125 28.4375V6.5625C3.28125 5.69226 3.62695 4.85766 4.24231 4.24231C4.85766 3.62695 5.69226 3.28125 6.5625 3.28125H24.0625C24.3526 3.28125 24.6308 3.39648 24.8359 3.6016C25.041 3.80672 25.1562 4.08492 25.1562 4.375C25.1562 4.66508 25.041 4.94328 24.8359 5.1484C24.6308 5.35352 24.3526 5.46875 24.0625 5.46875H6.5625C6.27242 5.46875 5.99422 5.58398 5.7891 5.7891C5.58398 5.99422 5.46875 6.27242 5.46875 6.5625V28.4375C5.46875 28.7276 5.58398 29.0058 5.7891 29.2109C5.99422 29.416 6.27242 29.5312 6.5625 29.5312H28.4375C28.7276 29.5312 29.0058 29.416 29.2109 29.2109C29.416 29.0058 29.5312 28.7276 29.5312 28.4375V17.5C29.5312 17.2099 29.6465 16.9317 29.8516 16.7266C30.0567 16.5215 30.3349 16.4062 30.625 16.4062C30.9151 16.4062 31.1933 16.5215 31.3984 16.7266C31.6035 16.9317 31.7188 17.2099 31.7188 17.5V28.4375C31.7188 29.3077 31.373 30.1423 30.7577 30.7577C30.1423 31.373 29.3077 31.7188 28.4375 31.7188H6.5625Z" fill="#1A2B48"></path>
<path d="M18.2744 22.6498L33.5869 7.33728C33.6885 7.23559 33.7692 7.11486 33.8242 6.98199C33.8793 6.84913 33.9076 6.70672 33.9076 6.5629C33.9076 6.41909 33.8793 6.27668 33.8242 6.14382C33.7692 6.01095 33.6885 5.89022 33.5869 5.78853C33.4852 5.68684 33.3644 5.60617 33.2316 5.55114C33.0987 5.4961 32.9563 5.46777 32.8125 5.46777C32.6687 5.46777 32.5263 5.4961 32.3934 5.55114C32.2605 5.60617 32.1398 5.68684 32.0381 5.78853L17.5 20.3288L11.7119 14.5385C11.6102 14.4368 11.4894 14.3562 11.3566 14.3011C11.2237 14.2461 11.0813 14.2178 10.9375 14.2178C10.7937 14.2178 10.6513 14.2461 10.5184 14.3011C10.3855 14.3562 10.2648 14.4368 10.1631 14.5385C10.0614 14.6402 9.98074 14.7609 9.92571 14.8938C9.87067 15.0267 9.84235 15.1691 9.84235 15.3129C9.84235 15.4567 9.87067 15.5991 9.92571 15.732C9.98074 15.8649 10.0614 15.9856 10.1631 16.0873L16.7256 22.6498C16.8272 22.7516 16.9479 22.8324 17.0808 22.8876C17.2137 22.9427 17.3561 22.9711 17.5 22.9711C17.6438 22.9711 17.7863 22.9427 17.9192 22.8876C18.0521 22.8324 18.1728 22.7516 18.2744 22.6498Z" fill="#1A2B48"></path>
</svg>
<div class="this-teg">
<p class="title">
Заголовок
</p>
<p class="text-this">
Описание
</p>
</div>
</div>
<div class="all-this-teg">
<svg class="check-svg3" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5625 31.7188C5.69226 31.7188 4.85766 31.373 4.24231 30.7577C3.62695 30.1423 3.28125 29.3077 3.28125 28.4375V6.5625C3.28125 5.69226 3.62695 4.85766 4.24231 4.24231C4.85766 3.62695 5.69226 3.28125 6.5625 3.28125H24.0625C24.3526 3.28125 24.6308 3.39648 24.8359 3.6016C25.041 3.80672 25.1562 4.08492 25.1562 4.375C25.1562 4.66508 25.041 4.94328 24.8359 5.1484C24.6308 5.35352 24.3526 5.46875 24.0625 5.46875H6.5625C6.27242 5.46875 5.99422 5.58398 5.7891 5.7891C5.58398 5.99422 5.46875 6.27242 5.46875 6.5625V28.4375C5.46875 28.7276 5.58398 29.0058 5.7891 29.2109C5.99422 29.416 6.27242 29.5312 6.5625 29.5312H28.4375C28.7276 29.5312 29.0058 29.416 29.2109 29.2109C29.416 29.0058 29.5312 28.7276 29.5312 28.4375V17.5C29.5312 17.2099 29.6465 16.9317 29.8516 16.7266C30.0567 16.5215 30.3349 16.4062 30.625 16.4062C30.9151 16.4062 31.1933 16.5215 31.3984 16.7266C31.6035 16.9317 31.7188 17.2099 31.7188 17.5V28.4375C31.7188 29.3077 31.373 30.1423 30.7577 30.7577C30.1423 31.373 29.3077 31.7188 28.4375 31.7188H6.5625Z" fill="#1A2B48"></path>
<path d="M18.2744 22.6498L33.5869 7.33728C33.6885 7.23559 33.7692 7.11486 33.8242 6.98199C33.8793 6.84913 33.9076 6.70672 33.9076 6.5629C33.9076 6.41909 33.8793 6.27668 33.8242 6.14382C33.7692 6.01095 33.6885 5.89022 33.5869 5.78853C33.4852 5.68684 33.3644 5.60617 33.2316 5.55114C33.0987 5.4961 32.9563 5.46777 32.8125 5.46777C32.6687 5.46777 32.5263 5.4961 32.3934 5.55114C32.2605 5.60617 32.1398 5.68684 32.0381 5.78853L17.5 20.3288L11.7119 14.5385C11.6102 14.4368 11.4894 14.3562 11.3566 14.3011C11.2237 14.2461 11.0813 14.2178 10.9375 14.2178C10.7937 14.2178 10.6513 14.2461 10.5184 14.3011C10.3855 14.3562 10.2648 14.4368 10.1631 14.5385C10.0614 14.6402 9.98074 14.7609 9.92571 14.8938C9.87067 15.0267 9.84235 15.1691 9.84235 15.3129C9.84235 15.4567 9.87067 15.5991 9.92571 15.732C9.98074 15.8649 10.0614 15.9856 10.1631 16.0873L16.7256 22.6498C16.8272 22.7516 16.9479 22.8324 17.0808 22.8876C17.2137 22.9427 17.3561 22.9711 17.5 22.9711C17.6438 22.9711 17.7863 22.9427 17.9192 22.8876C18.0521 22.8324 18.1728 22.7516 18.2744 22.6498Z" fill="#1A2B48"></path>
</svg>
<div class="this-teg">
<p class="title">
Заголовок
</p>
<p class="text-this">
Описание
</p>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper-background-iphone">
<div class="background-phone-ur-this">
<h3 class="background-phone-h3">
Вдохни <br>
свободу!
</h3>
</div>
<!-- <div class="background-iphone"></div> -->
</div>
<div class="wrapper-our-this"></div>
</div>