Есть генератор галереи:
<body>
<header class="main-header">
<a class="header-phone" href="tel:+79873214523">+79873214523</a>
<div class="dot-windmill"></div>
<a class="header-email" href="mailto:feanor1992@gmail.com">feanor1992@gmail.com</a>
</header>
<main class="main">
<div class="container">
<input type="file" multiple accept="image/*">
<button>Generate</button>
</div>
</main>
<footer class="main-footer">
<div>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</footer>
Я с помощью CSS задаю фон:
html, body {
margin: 0;
padding: 0;
height: 100%; }
body {
min-width: 1366px;
background: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%) no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-origin: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 16px;
line-height: 20.8px;
color: #ffffff; }
body {
display: flex;
flex-direction: column;
justify-content: space-between; }
.main-header {
flex: 0 0 auto;
margin-top: 15px;
display: flex;
justify-content: space-between;
width: 100%; }
.main {
flex: 1 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: center;
margin: auto; }
main-footer {
flex-shrink: 0;
display: flex;
justify-content: space-between;
width: 100%;
justify-content: center; }
Но, если добавлять большое количество фоток, то появляется прокрутка и при этом фон уже не растягивается дальше по высоте. Как это можно исправить?
Простой
