0
MVCページの背景画像を全画面に設定できません。背景画像はページの本文のセクション全体を拡大縮小しません
ない問題が何であるかを確認し、次のように私の画面上に出力されます。 app.cssファイルでカバーするbodyタグの背景イメージを設定しました。スクリーンショットで見られるように、画像はグリッドの後ろにあり、上部にのみ表示されます。
html,body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
か：：画面の下部にある空白は
body {
font-family: Helvetica, sans-serif, sans-serif;
font-size: 13px;
border-top: none;
background-image: url('../Images/iNeed__waterfall_BG.jpg');
background-repeat: no-repeat;
background-size: cover;
}
レイアウトページ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/app.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/angular.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/kendo.all.min.js")"></script>
</head>
<body >
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#"><img src="~/Images/NGSR-logo.jpg" /> </a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></a></li>
<li><a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></a></li>
<li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></a></li>
<li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Admin</p></a></li>
<li class="dropdown hideli">
@*<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">*@
<select class="form-control">
<option><a href="#">ALL</a></option>
<option><a href="#">DE</a></option>
<option><a href="#">GB</a></option>
<option><a href="#">FR</a></option>
</select>
<p>Country</p>
@*</a>*@
</li>
<li><a href="#"><span class="glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div>
@RenderBody()
</div>
</body>
</html>
私は両方を試しました。最初はcss3で好きではありません。もう1つは、スクリーンショットのようなものを私に示しています – Tom
私が気づいたもう一つのことは、index.htmlにあるグリッドにコメントを付けると、イメージが消えることです。通常は画像のみが必要です。私は何が起こっているのか理解できませんでした。 index.htmlにはイメージへの参照はありません。 – Tom
htmlタグ用に設定しますか？ –