Answer the question
In order to leave comments, you need to log in
How to put this picture in the background and not break everything?
I've been trying all day to solve this problem, but it doesn't work. Either everything changes its position, or the picture does not press against the edge, or it is generally at the bottom of the site (it goes to the end). For clarity, I have attached both a screenshot of the layout and a screenshot of the site. I also attached the code (we are talking about a picture with the inscription homelife)
<section>
<div class="chair">
<div class="container">
<div class="chair__inner">
<div class="chair__title">
Лучшая <a class="chair__word">дизайнерская</a> фурнитура для дома
</div>
<div class="chair__button">
Подробнее
<img class="chair__arrow" src="/Users/amirdavlatov/Documents/arr.png">
</div>
<div class="chair__img">
<img src="/Users/amirdavlatov/Documents/img-chair.png">
</div>
</div>
</div>
<div class="chair__bgimg">
<img src="/Users/amirdavlatov/Documents/homelife bottom.png">
</div>
<div class="chair__wave">
<img src="/Users/amirdavlatov/Documents/wave.png" width="1170">
</div>
</div>
</section>
.container{
color: #0f0a00;
max-width: 1170px;
margin: 0 auto;
padding: 0px 15px;
font-family: 'Montserrat', sans-serif;
}
.chair{
background-color: #f5f8f1;
overflow: hidden;
}
.chair__inner{
display: flex;
justify-content: space-between;
}
.chair__wave{
display: flex;
margin-top: 450px;
}
.chair__img{
padding-top: 90px;
padding-right: 107px;
}
.chair__title{
padding-top: 168px;
font-size: 48px;
min-width: 475px;
font-weight: 600;
color: #0f0a00;
}
.chair__word{
background-color: #edce47;
padding: 0px 8px;
}
.chair__button{
background-color: #edce47;
padding: 21px 0px;
padding-left: 55px;
font-size: 16px;
font-weight: 600;
min-width: 165px;
position: absolute;
margin-top: 305px;
}
.chair__arrow{
padding: 0px 42px 0px 14px;
}
.chair__bgimg{
position: absolute;
}
Answer the question
In order to leave comments, you need to log in
You do everything the same way according to the layout, observing the indents, taking the letters as well and then just align it with the absolute down and that's it. Well, also set her z-index: either 0 or -1.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question