web-dev-qa-db-ja.com

asp.net MVCで完全な背景画像を適用する方法

私はasp.net MVCを初めて使用するので、ログインページに完全な背景画像を表示する必要があります。私はすべてのcshtmlと混同し、完全な背景画像をどこに設定するか迷っています。助けてください..

htmlcssasp.net-mvc
7
JADE

最善の解決策は、スタイルシート（css）を使用することだと思います。すべてのスタイルは別のcssファイルにある必要があります。美しいコードの場合、インラインスタイルを使用しないでください。

body {
    background-image: url('your_img_path');
    margin: 0;
}
7
Marcin

まず、すべての設計目的で「.cshtml」を「.html」と同じように扱います。ビュー（Asp.net MVCの.cshtmlページ）に背景画像を追加するには、次のように追加するだけです。 <ボディ> タグ付け 'バックグラウンド' 属性。サンプルコードを提供しました。見てください。

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login Page</title>

</head>

<body background="~/Content/Images/sahb.png">
</body>

</html>

よろしく！ SAHB

3
Syed Asim Ashiq

特定のViewで背景を変更したい場合は、thiseコードを追加してください

@section head{
    <style type="text/css">
         body {
            background-image: url('/Images/paper.jpg');
            margin: 0;
        }
    </style>
}

しかし、忘れないでくださいレイアウトこのビュー次の行を追加

<head>

  @RenderSection("head", required: false)

</head>
2
Developer

Index.cshtml：

    @{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/CSS/Main.css" />
</head>
<body 

</body>

</html>

main.css：

body {
background-image: url(../Images/myBackgroundPictureName.png);
background-repeat:no-repeat;
background-size:cover;
}
0
Sharunas Bielskis

すべてのページで必要な場合は、Shared/_Layout.cshtmlファイルを使用して、次のようにbodyタグを変更します。

おそらく、Home/Index.cshtmlページのみに配置して、ホームページにのみ表示されるようにする他のページで繰り返されるのを避けるために、Shared/Index.chtmlファイルのホームページに次のようにIDを追加します_<body id="HomepageBody" >_およびContent/site.cssファイルで変更します#HomepageBody { background-image: url("/images/7flowers.jpg" ); background-repeat:no-repeat; background-position:center; }を追加します

これにより、Chromeなどの一般的なブラウザで機能します。

0
Sam Patirage