How to apply full background image in asp.net MVC - html

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

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;
}

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

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>

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.

if you wanna use background-image: url('');
just do not use ~ symbol

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'

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;
}

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>

Related

External CSS background Image

I do not understand WHAT I am doing wrong. I'm new to this and just trying to follow this online course...
So I have my HTML file and all I'm trying to do is shove my tiny bit of CSS into a separate .css file.
When I use < link rel="stylesheet" href="./Documents/Untitled1.css > in the head tag of my HTML file, referring to my CSS code that just states a basic CSS, the background does not change...
HOWEVER, if I use the style tag inside my head tag... it works JUST fine using my CSS code.
body {
background-image: url("./images/rain.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Please someone tell me what I'm doing wrong...
<style>
body{
background-image: url('https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg');
background-repeat: no-repeat;
background-size: cover;
}
</style>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="stack.css">
</head>
<body>
</body>
I think your CSS href path I guess !! not sure you can check the above code
Name your styles file "style.css", put style.css to the same folder where you have your *.html file and inside html file paste this line:
<link rel="stylesheet" type="text/css" href="./style.css" />
Your issue is caused by wrong path to css
you have a whitespace character between tag opening and the link keyword
< link rel="stylesheet"...
should be
<link rel="stylesheet"...
also - do you really have your css in Documents folder?
I know what's wrong here, I have faced this issue so many times. The background image doesn't show up because you haven't set a height to it.
body {
height: 100%
}
This will do the work.
Reference
is your HTML and CSS in the same folder?
If yes then just use
<link rel="stylesheet" href="Untitled1.css">

CSS's background-image in Eclipse IDE?

I'm new to HTML and CSS and I'm trying to make a website using springboot but I can't add a background image to it. this is how I'm doing it:
body {
background-image: url(images/background.jpg);
}
I've also tried using src/main/java/images/background.jpg, still doesnt work.
(HTML files are in src/main/resources/templates folder and CSS files in src/main/resources/static folder)
Did i import the image correctly? Thank you for help
This is my HTML code (it's pretty bad, I can't really use it):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link href="/style.css" rel="stylesheet">
<title>Catering Ristorazione C.S.L</title>
</head>
<body>
<div>
<h1> <strong><em>Catering Ristorazione C.S.L</em></strong></h1>
<div> <hr>
<a th:href="#{/elencochefs}" >Elenco degli chef</a>
</div>
<div>
<a th:href="#{/elencobuffets}" >Elenco dei buffet</a>
</div>
</hr>
</div>
</body>
</html>
Move your folder images to /src/main/resources/static
Also, you should modify your stylesheet to start the background-url with /.
body {
background-image: url(/images/background.jpg);
}

Is this what my page should look like?

So I'm basically wondering if the code I wrote is supposed to just pop up a page with "This web page uses an external style sheet", in blue font. I've been trying for hours to get my CSS to link to my HTML code and finally I did but all it was, was blue font. P.S I'm supposed to turn this in tonight so need to be sure!
What it looks like
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<meta charset="utf-8">
<link rel="stylesheet" href="color.css">
</head>
<body>
<p>This web page uses an external style sheet.</p>
</body>
</html>
css:
body { backround-color: #0000FF;
color: #FFFFFF;
}
No it is not. It suppose to show with White Color font with a light background.
This is some other css or browser plugin's impact.
You can try on the fiddle first to verify what it can look like at a clean state.
https://jsfiddle.net/
First of all you have wrongly typed background-color.
The code you provided is giving you the Blue background with white text.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Fiddle</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="txtPopup">
<p>This web page uses an external style sheet</p>
</div>
</body>
</html>
CSS Code
body {
color: #FFFFFF;
background-color: #0000FF
}

background image not displaying css/html

This is probably a really simple problem that I'm guessing has a very obvious but stupid solution but I am not seeing it. I am trying to get an image to become a tiled background and for some reason the image is not appearing nor am I getting errors. I have checked permissions and set all files and folders to 777. Can someone point out the problem for me thanks.
My CSS file:
body {
background-image: url("images/main_background.png");
}
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<div id="main_container">
</div>
</body>
</html>
Your image is in images folder and css is in css folder.
images/main_background.png means that images folder is inside the css folder, but it is not.
write this:
body {
background-image: url("../images/main_background.png");
}
OR
body {
background-image: url("/images/main_background.png");
}

IE8 does not print an image in :before pseudo-element

I want to put an icon image before a text. Any HTML tag such as <img> should be avoided because any changes of HTML structure may affect our javascript code.
I write the following code and it works on screen with IE8/Firefox.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=8' />
<style type="text/css">
div.before-test:before {
content: url("sample.png");
}
</style>
</head>
<body>
<div>aaaa</div>
<div>bbbb</div>
<div class="before-test">cccc</div>
<div>dddd</div>
</body>
</html>
But, when visitors try to print the web page with IE8, the image disappears. How can I show the image even when printing with IE8, or must I add HTML tag for the image?
IE8 supports before but not in compatibility mode.
i think you should look at this guide as to what properties and stuff are supported on some browsers especially IE 6 and up.
http://www.quirksmode.org/css/contents.html
by the way, the url in url() - quotes are optional. better to have none to avoid unnecessary escaping issues
http://www.w3.org/TR/CSS2/syndata.html#value-def-uri
<style type="text/css">
div.before-test:before {
content: url(sample.png);
}
</style>
The only way i could find is from in stackoverflow. I know, it is not a good approach but , i guess there is no solution about this bug
HTML:
<div class="PrintOnly">
<img id="PrintLogo" src="sample.png"/>
</div>
CSS:
.PrintOnly { display:none; }
#media print {
.PrintOnly { display:block; }
}