How to apply full background image in asp.net MVC

前端未结

关注

 5  340

I\'m new to asp.net MVC and I need to have a full background image on the login page. Im getting confused with all of the cshtmls and getting lost on where to set the full b

相关标签:

5条回答

[愿得一人]

2021-01-12 09:26

If you want it on all pages use Shared/_Layout.cshtml file and change body tag similar to

Probably I would put only on the Home/Index.cshtml page so it appears only on the home page To avoid that repeated across other pages I would add an ID to home page in the Shared/Index.chtml file as follows <body id="HomepageBody" > and change it in the Content/site.css file add #HomepageBody { background-image: url("/images/7flowers.jpg" ); background-repeat:no-repeat; background-position:center; }

That would make it work across popular browsers like Chrome.

0 讨论(0)
发布评论:

提交评论
- 加载中...
傲寒

2021-01-12 09:30
I think that best solutions is to do that via style sheets (css). All styles should be in a separate css file. For beautiful code don't use in-line styling:
```
body {
    background-image: url('your_img_path');
    margin: 0;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

清歌不尽

2021-01-12 09:36

In case if you want change background in a particular View just add thise code

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

But dont forget in Layout of this View add following line

<head>

  @RenderSection("head", required: false)

</head>

0 讨论(0)

[愿得一人]

2021-01-12 09:45
Firstly I would say, treat '.cshtml' just like '.html' for all designing purposes. To add background image in a view (.cshtml page in Asp.net MVC), you simply need to add it in < body > tag as 'background' attribute. I have provided the sample code. Have a Look.
```
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login Page</title>

</head>

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

</html>
```
Regards! SAHB
0 讨论(0)
发布评论:

提交评论
- 加载中...

逝去的感伤

2021-01-12 09:45

In 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>

in Main.css:

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

0 讨论(0)