Всем привет! У меня съезжает картинка. Вот скрин:
Она должна быть в притык к нижнему блоку.
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 ><img class="towncopy" src="img/town_copy.png"></div>
<div class="sectionbg"></div>
</div>
</main>
<footer>
</footer>
</body>
</html>
CSS:
.background {
background: url(img/bg.png) no-repeat;
background-size: cover;
position: absolute;
width: 100%;
height: 2500px;
min-height: 1100px;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
}
.gradientc {
background: url(img/gradient_copy.png) no-repeat;
background-size: cover;
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;
background-size: cover;
width: 100%;
height: 25%;
min-height: 374px;
margin-top: 1330px;
}
.towncopy{
position: absolute;
width: 100%;
height: auto;
margin-top: 1150px;
}
Я пробовал margin делать в процентах, но не помогло.
Вот есть еще картинки, чтобы собрать верстку.
Это bg.png :
Это gradient_copy.png :
Это section_bg.png :
Это town_copy.png :
