Я создал веб-сайт, который обслуживает шаблоны с помощью Angular, я разработал стиль сайта с помощью CSS и Bootstrap (для облегчения реакции мобильных устройств и т. Д.).Сайт выглядит хорошо на настольном компьютере / мобильном устройстве, но если вы измените размер окна, столбцы будут складываться так, как они должны, но фоновое изображение увеличивается и оставляет пустое пространство внизу, а столбцы выходят за нижнюю часть фона.Это также случается, когда окно инструментов разработчика поднимается (мое поднимается снизу).Это создает пустое пространство.Есть ли способ заставить фоновое изображение никогда не сдвигаться?На мобильном телефоне я добавил медиа-запрос, который помещает столбцы с накоплением в поле прокрутки с максимальной высотой, у меня меньше свободного места, но все же немного внизу.Я попытался установить фоновое положение центра и фоновое вложение безрезультатно.Я включил скриншоты того, что он делает.
Это базовый HTML-код приложения -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Goldbee Dev</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/styles/all.min.css">
<link href='https://fonts.googleapis.com/css?family=Lobster|Roboto|Titillium+Web|Rock+Salt|Condiment|Mate+SC|Pacifico' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</head>
<body ng-app="app">
<div ng-view></div>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="dist/scripts/global.js"></script>
</body>
</html>
Домашний шаблон, который загружается в начале -
<div class="container" id="main-container">
<div class="title-area">
<h1 class="home-title">GoldbeeDev
<img class="hvr-buzz" src="images/bee-icon-11.png">
</h1>
<h4>
<button class="link hvr-hang" ng-click="contact()">Contact</button>|
<button class="link hvr-hang" ng-click="about();">About</button>|
<button class="link hvr-hang" ng-click="portfolio()">Portfolio</button>
</h4>
</div>
</div>
При нажатии на портфель он загружает этот шаблон -
<img class="homelogo hvr-rotate" src="images\home.png" ng-click="$location.path('/')">
<div class="container">
<div ng-include="portfolioPath" onload="finishLoading()">
</div>
</div>
Это домашняя страница портфолио, включая HTML (где я испытываю эти проблемы) -
<div class="container pages" id="main-container">
<div class="row">
<div class="col-sm-4">
<img class="portfolio-thumb hvr-grow" src="images\quotespic.png" ng-click="portClick(portfolioTemplates[1].url)">
<p class="project-text">JS Quote Generator</p>
</div>
<div class="col-sm-4">
<img class="portfolio-thumb hvr-grow" src="images\tictacpic.png" ng-click="tictacStart()">
<p class="project-text">Tic Tac Toe JS</p>
</div>
<div class="col-sm-4">
<img class="portfolio-thumb hvr-grow" src="images\moviesearchpic.png" ng-click="movieStart()">
<p class="project-text">Movie Search</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img class="portfolio-thumb hvr-grow" src="images\paginationpic.png" ng-click="portClick(portfolioTemplates[2].url)">
<p class="project-text">jQuery Pagination</p>
</div>
<div class="col-sm-4">
<img class="portfolio-thumb hvr-grow" src="images\redwolfpic.png" ng-click="portClick(portfolioTemplates[3].url)">
<p class="project-text">Video Background Homepage</p>
</div>
<div class="col-sm-4">
<img class="portfolio-thumb hvr-grow" src="images\singlepagepic.png" ng-click="recipeClick()">
<p class="project-text">Angular Single Page App</p>
</div>
</div>
</div>
</div>
И соответствующие CSS -
#main-container {
margin-top: 5%;
}
#main-container:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('../../images/bluefuzzbg.jpg') no-repeat;
background-size: cover;
z-index: -99;
opacity: 0.6;
}
.portfolio-thumb {
max-width: 325px;
}
экраны -
Эта проблема, похоже, возникает и на других шаблонах вне портфеля, но не так плохо.Я открыт для любых предложений / советов, и я ценю, что вы нашли время, чтобы прочитать это.