Background image постепенно исчезает
Почему-то при скролле фоновое изображение (круг желтый) постепенно исчезает, как будто залазит под другой блок. Не понимаю, почему так... Помогите, пожалуйста
*{
box-sizing:border-box;
}
body{
margin: 0;
padding: 0;
background-color: #FEFDEF;
font-size: 16px;
font-family:'Roboto', sans-serif;
font-weight: 400;
}
ul{
list-style: none;
padding: 0;
margin-top: 0;
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.1em;
font-family:'Roboto', sans-serif;
font-weight: 400;
}
li{
margin-top: 62px;
}
a{
text-decoration: none;
color: rgb(42, 17, 41);
}
/* .container,.menu,.plot{
/* border:2px solid blue;} */
.posting{
/* border: 1px dashed red; */
width: 80%;
height: 19%;
margin-left: 12%;
margin-top: 6%;
}
.photo{
/* border: 1px solid brown; */
border-radius: 100%;
background: rgba(64, 183, 190, 0.42);
width: 115px;
height:115px;
position: relative;
}
.photo img{
width: 50px;
height: 50px;
position: absolute;
right:30px;
bottom: 30px;
}
.whopost{
font-size: 0.75em;
font-weight: 300;
font-style: italic;
margin-left: 2.6%;
}
.appeal{
margin-top: 4%;
margin-left: 12%;
font-size: 1.75em;
font-family:'Roboto', sans-serif;
font-weight: 500;
}
.container{
width: 100%;
height: 100vh;
margin-top: 0;
margin: 0 auto;
/* display: flex; */
position: static;
display: flex;
justify-content: flex-end;
}
.menu{
width: 20%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
overflow-x: hidden; /* Disable horizontal scroll */
background: rgba(247, 165, 143, 0.96);
box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.25);
}
.menu ul{
width: 100%;
}
.menu ul li{
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul li a{
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul li a:hover{
background-color: #F07167;
}
.menu ul li a:active{
background-color: #F07167;
}
.rect{
/* border:1px solid black; */
border-radius: 26px;
background: rgba(64, 183, 190, 0.42);
width: 77%;
height: 16vh;
padding: 2%;
}
.quoteline{
margin-top: 0.5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.quotetext{
font-size:1.375em;
}
.quotespeaker{
font-size: 1.125em;
font-weight:300;
/* width: fit-content; */
display: flex;
justify-content: flex-end;
margin-top: 3%;
}
.plot{
width: 80%;
height: auto;
background-image: url("icons/Rectangle 59.svg");
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 60% 50%;
/* padding-left: 13.44%; */
/* border: 5px dotted brown; */
}
.logo{
width: auto;
margin: 0 auto;
margin-top: 46px;
}
.btn2{
margin-top: 50%;
background-color: #80ED99;
color: #873434;
width: 62%;
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.875em;
font-family:'Roboto', sans-serif;
font-weight: 300;
filter: drop-shadow(0px 4px 31px #C45B5B);
border-radius: 19px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style2.css">
<title>Document</title>
</head>
<body>
<section class="main">
<div class="container">
<div class="menu" id="menu">
<div class="logo">
<svg width="167" height="33" viewBox="0 0 167 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.67 0.499998H12.375L17.505 32H12.555L11.655 25.745V25.835H6.03L5.13 32H0.54L5.67 0.499998ZM11.07 21.56L8.865 5.99H8.775L6.615 21.56H11.07ZM23.5065 0.499998H31.0665C33.5265 0.499998 35.3715 1.16 36.6015 2.48C37.8315 3.8 38.4465 5.735 38.4465 8.285V24.215C38.4465 26.765 37.8315 28.7 36.6015 30.02C35.3715 31.34 33.5265 32 31.0665 32H23.5065V0.499998ZM30.9765 27.5C31.7865 27.5 32.4015 27.26 32.8215 26.78C33.2715 26.3 33.4965 25.52 33.4965 24.44V8.06C33.4965 6.98 33.2715 6.2 32.8215 5.72C32.4015 5.24 31.7865 5 30.9765 5H28.4565V27.5H30.9765ZM43.9949 0.499998H48.9899L52.2299 24.935H52.3199L55.5599 0.499998H60.1049L55.3349 32H48.7649L43.9949 0.499998ZM66.0825 0.499998H71.0325V32H66.0825V0.499998ZM84.7747 32.45C82.3747 32.45 80.5597 31.775 79.3297 30.425C78.0997 29.045 77.4847 27.08 77.4847 24.53V22.73H82.1647V24.89C82.1647 26.93 83.0197 27.95 84.7297 27.95C85.5697 27.95 86.1997 27.71 86.6197 27.23C87.0697 26.72 87.2947 25.91 87.2947 24.8C87.2947 23.48 86.9947 22.325 86.3947 21.335C85.7947 20.315 84.6847 19.1 83.0647 17.69C81.0247 15.89 79.5997 14.27 78.7897 12.83C77.9797 11.36 77.5747 9.71 77.5747 7.88C77.5747 5.39 78.2047 3.47 79.4647 2.12C80.7247 0.739998 82.5547 0.0499983 84.9547 0.0499983C87.3247 0.0499983 89.1097 0.739998 90.3097 2.12C91.5397 3.47 92.1547 5.42 92.1547 7.97V9.275H87.4747V7.655C87.4747 6.575 87.2647 5.795 86.8447 5.315C86.4247 4.805 85.8097 4.55 84.9997 4.55C83.3497 4.55 82.5247 5.555 82.5247 7.565C82.5247 8.705 82.8247 9.77 83.4247 10.76C84.0547 11.75 85.1797 12.95 86.7997 14.36C88.8697 16.16 90.2947 17.795 91.0747 19.265C91.8547 20.735 92.2447 22.46 92.2447 24.44C92.2447 27.02 91.5997 29 90.3097 30.38C89.0497 31.76 87.2047 32.45 84.7747 32.45ZM98.6829 0.499998H112.183V5H103.633V13.325H110.428V17.825H103.633V27.5H112.183V32H98.6829V0.499998ZM118.541 28.58C118.541 26.33 118.901 24.41 119.621 22.82C120.341 21.2 121.631 19.415 123.491 17.465C125.321 15.515 126.581 13.85 127.271 12.47C127.991 11.09 128.351 9.65 128.351 8.15C128.351 6.8 128.126 5.87 127.676 5.36C127.256 4.82 126.626 4.55 125.786 4.55C124.076 4.55 123.221 5.585 123.221 7.655V11.03H118.541V7.97C118.541 5.42 119.171 3.47 120.431 2.12C121.691 0.739998 123.521 0.0499983 125.921 0.0499983C128.321 0.0499983 130.151 0.739998 131.411 2.12C132.671 3.47 133.301 5.42 133.301 7.97C133.301 9.89 132.836 11.765 131.906 13.595C131.006 15.425 129.431 17.525 127.181 19.895C125.711 21.455 124.721 22.73 124.211 23.72C123.701 24.68 123.446 25.715 123.446 26.825V27.5H132.851V32H118.541V28.58ZM140.248 27.23H145.018V32H140.248V27.23ZM159.485 32.45C157.055 32.45 155.195 31.76 153.905 30.38C152.615 29 151.97 27.05 151.97 24.53V7.97C151.97 5.45 152.615 3.5 153.905 2.12C155.195 0.739998 157.055 0.0499983 159.485 0.0499983C161.915 0.0499983 163.775 0.739998 165.065 2.12C166.355 3.5 167 5.45 167 7.97V24.53C167 27.05 166.355 29 165.065 30.38C163.775 31.76 161.915 32.45 159.485 32.45ZM159.485 27.95C161.195 27.95 162.05 26.915 162.05 24.845V7.655C162.05 5.585 161.195 4.55 159.485 4.55C157.775 4.55 156.92 5.585 156.92 7.655V24.845C156.92 26.915 157.775 27.95 159.485 27.95Z" fill="#4C4E67"/>
</svg>
</div>
<ul>
<li><a href="#">История</a></li>
<li><a href="#">Спорт</a></li>
<li><a href="#">Наука</a></li>
<li><a href="#">Люди</a></li>
</ul>
<div class="btn2">Добавить Эдвайс</div>
</div>
<div class="plot">
<div class="appeal">Вдохновись опытом других!</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
скрин
Ответы (1 шт):
Автор решения: NameDropper
→ Ссылка
У вас в стилях у div с классом container фиксированная высота height: 100vh, а, также, у div с классом posting фиксированная высота height: 19%. Из-за этого блок, в котором находится фоновое изображение, обрезан (т.е. не на всю высоту документа, как может показаться), а контент в этом контейнере просто выпадает из родительского блока.
Попробуйте убрать эти параметры в стилях.
Такие моменты хорошо видны в инструментах разработчика в браузере (при наведении на любой блок выделяется его контур, что позволяет видеть где он заканчивается), поэтому стоит в таких случаях обращаться к devtools.