1

Подскажите, пожалуйста, как сделать так чтобы фоновая картинка(choclateCake) у блока .wrapper была статична при сужении экрана, т.е. при сужении как бы уходила за пределы видимости и не наезжала на содержимое .container. Если задать контейнеру такой же фон, как у wrappera, это частично решает вопрос, но визуально смотрится фигово.

style.css

body {
    padding: 0;
    margin: 0;
    min-width: 325px;


}
body * {
    box-sizing: border-box;
}
p {
    line-height: 2;
}
.wrapper {
    position: relative;
    background: url("/images/choclateCake.svg") no-repeat left fixed,linear-gradient(rgba(175,198,234,1) 0%, rgba(175,198,234,1) 70%, rgba(255,167,177,1) 70%);
    /background:  no-repeat,linear-gradient(rgba(175,198,234,1) 0%, rgba(175,198,234,1) 70%, rgba(255,167,177,1) 70%);/


}


.left-top{
    position: absolute;
    left:150px;
    top: 150px;
    width: 150px;
}
.left-bottom{
    position: absolute;
    left:250px;
    bottom: 250px;
    width: 150px;
}
.right-top{
    position: absolute;
    right:250px;
    top: 150px;
    width: 150px;
}
.right-bottom{
    position: absolute;
    right:250px;
    bottom: 150px;
    width: 150px;
}


.container {
    margin: 0 auto;
    max-width: 975px;
    padding: 15px;
}


.main {
    display: flex;


}
.cake {
    flex: 2;
}
.title h1 {
    margin: 0 0 15px 0;


font-size: 26px;



}
.date p{
    line-height: 1;
    margin: 0 0 5px 0;
}
.text {
    flex: 1;
}
.footer p {
    font-size: 10px;
    line-height: 1;
}
.descr p{
    margin: 0;
    font-size: 18px;
    line-height: 22px;
}
.descr-part p{
    margin: 0;
    font-size: 18px;
    line-height: 22px;
}
.descr-part > button {
    margin-top: 18px;
}
.hidden {


}
.open {
    display: none;
}
button {
    margin: 0 auto;
    display: block;
    background: #FF527D;
    height: 40px;
    border: none;
    color:#fff;
    border-radius: 8px;
    width: 222px;
}


.footer.open > button {
    margin-bottom: 18px;
}
@media screen and (max-width: 910px) {
    .descr-part {
        max-width: 500px;
        margin: auto;
    }
    .cake img {
        max-width: 500px;
        margin: 0 auto;
    }
    .wrapper {
        text-align: center;
        background: linear-gradient(rgba(175,198,234,1) 0%, rgba(175,198,234,1) 49%, rgba(255,167,177,1) 49%);
    }
    .main {
        flex-direction: column;
    }
    .cake {
        order: 2;
    }
    .hidden {
        display: none;
    }
    .open {
        display: block;
    }
    .footer.open {
        background: #fff;
        padding: 20px;
    }
}


@media screen and (max-width: 450px) {
    .wrapper {
        background: linear-gradient(rgba(175,198,234,1) 0%, rgba(175,198,234,1) 45%, rgba(255,167,177,1) 45%);
    }
}
@media screen and (max-width: 350px) {
    .wrapper {
        background: linear-gradient(rgba(175,198,234,1) 0%, rgba(175,198,234,1) 42%, rgba(255,167,177,1) 42%);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="wrapper">
    <div class="container">
        <div class="main">
            <div class="cake">
                <img src="./images/mainCake.svg" alt="">
                <div class="descr-part open">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit urna ipsum, et bibendum urna ornare in. Praesent interdum felis id ipsum malesuada, quis rhoncus nisl porttitor.
                    </p>
                </div>

            </div>
            <div class="text">
                <div class="title">
                    <h1> Lorem ipsum</h1>
                </div>
                <div class="date">
                    <p><b>с 17.01.2022 по 31.01.2022</b></p>
                </div>
                <div class="descr">
                    <p> Lorem ipsum dolor sit amet</p>
                    <p> Lorem ipsum dolor sit amet</p>
                    <div class="descr-part hidden">
                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit urna ipsum, et bibendum urna ornare in. Praesent interdum felis id ipsum malesuada, quis rhoncus nisl porttitor.</p>
                        <button>lorem</button>
                    </div>

                </div>
            </div>
        </div>
        <div class="footer hidden">
            <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit urna ipsum, et bibendum urna ornare in. Praesent interdum felis id ipsum malesuada, quis rhoncus nisl porttitor.
            </p>
        </div>
    </div>
    <div class="footer open">
        <button>Lorem</button>
        <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit urna ipsum, et bibendum urna ornare in. Praesent interdum felis id ipsum malesuada, quis rhoncus nisl porttitor.
        </p>
    </div>
</div>
</body>
<script src="script.js"></script>
</html>
ghetto-coder
  • 33
  • 6

1 Answers1

1

Я решил эту проблему так: Сделал svg 1920*725, часть залил голубым, часть розовым, расположил пироженки на своих местах, то есть просто сделал их частью фона. Поменял у .wrapper background на

background: url(/<имя директории>/<имя файла>.svg) no-repeat center top fixed;

Не уверен насчет правильности и элегантности решения, но мою задачу это решило.

ghetto-coder
  • 33
  • 6