Я пишу сайт, но блок выдвигается и box-shadow не работает нормально. Если быть точным, блок с классом sectionbg не помещается на место. Я попытался заменить url () цветами и все встало на свои места. То есть проблема в самих картинках. Пробовал поставить блок по центру. Я больше не знаю, как решить эту проблему! Помоги мне, пожалуйста.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header>
</header>
<main >
<div class="background"></div>
<div class="gradientc">
<div class="sectionbg"></div>
</div>
</main>
<footer>
</footer>
</body>
</html>
CSS:
.background{
background: url(img/bg.png) no-repeat;
background-size: cover;
position: absolute;
float: center;
width: 100%;
height: 2200px;
min-height: 1100px;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
}
.gradientc{
background: url(img/gradient_copy.png) no-repeat;
background-size: cover;
float: center;
position: absolute;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
width: 73.125%;
height: 1772px;
min-height: 886px;
left: 13.4375%;
top: 13.4375%;
opacity: 0.95;
}
.sectionbg{
background: url(img/section_bg.png) no-repeat;
position: absolute;
background-size: cover;
align-items: flex-end;
width: 100%;
height: 25%;
min-height: 374px;
margin-left: 2.6%;
margin-top: 1200px;
}
Вот фото того как это выглядит у меня:
Вот части для верстки:
Это bg.png:
Это gradient_copy.png:
Это section_bg.png:
Простой
Простой