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 background image. Help please..
-
2Your question it's about HTML/CSS not ASP.NET MVC, By the way, you can define a layout for your login page.Sirwan Afifi– Sirwan Afifi2015-08-26 09:23:30 +00:00Commented Aug 26, 2015 at 9:23
-
1This is a more CSS Specific question really. You need the image and in the Shared Views folder there is a partial view for the login page, if you want a full background you cannot use a partial view, you will need to use a regular view without a layout.Jamie Rees– Jamie Rees2015-08-26 09:23:39 +00:00Commented Aug 26, 2015 at 9:23
Add a comment
|
9 Answers
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;
}
2 Comments
Jamie Rees
You have missed some of the facts. He needs to use it on a MVC login page, so he needs to change the login page referencing the layout really.
Marcin
@Jamie Rees - yes, you are right. He must do everything you said in your comment under his question and than use my small hint
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
Comments
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>
Comments
if you wanna use background-image: url(''); just do not use ~ symbol
Comments
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.
Comments
use this code in cshtml page to insert background image on entire screen of your div section
<div style="background-image: url('/Areas/Admin/Content/Image/OIP7.jpg'); background-repeat:no-repeat; background-size:100% 100%">one more thing ~ is not working in Url. start your image address with forward slash / link this '/Areas/Admin/Content/Image/OIP7.jpg'
Comments
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;
}
Comments
It is very simple just use a css property background image on that div or that section you want.
<div style="background-image: url('/Content/images/image_2.jpg');"></div>
If your image is not displaying, you may have to add ~ tilde sign to the URL
Example :
<div style="background-image: url('~/Content/images/image_2.jpg');"></div>
Comments
Use the css property background-image and don't use the '~' symbol.
Ex: <div background-image: url('/Images/abc.png')></div>
Comments
