I have made a simple login page and set an image as background but it is not fitting to browser screen.I am using html for this purpose what should I do fit the image to browser screen.Kindly please describe in detail.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional
//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSP Page</title>
</head>
<body>
<h1>Login Page</h1>
<center>
<h2>SignUp Details</h2>
<body background="Indian_wallpapers_205.jpg">
<form action="LoginCheck.jsp"method="post">
</br>Username:<input type="text" name="username">
</br>Password:<input type="password" name="password">
</br>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
This question is related to
html
css
jsp
background
You can achieved what you want by creating a .css file and link to your <head> tag just after the </title> (closing title tag).
Hi-Resolution image will be good to use, around 2112x1584 pixels but consider the file size because it will matter for the page load time.
On the opening of your <body> tag, just delete the background property as it will be declared through the .css file.
When your image is ready, put this code to your .css file
body {
background-image: url(imagePAth/Indian_wallpapers_205.jpg); /*You will specify your image path here.*/
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: top center !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}
When your .css file is done, you can link it to the <head> tag. It will look something like this: <link rel="stylesheet" type="text/css" href="yourCSSpath/yourCSSname.css" />
That's how i make a background image to fit the browser screen.
Try This Code: It may help you
<html>
<head>
<style>
body
{
background:url('images/top-left.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<form action="LoginCheck.jsp"method="post">
</br>Username:<input type="text" name="username">
</br>Password:<input type="password" name="password">
</br>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
add this css in your stylesheet
body
{
background:url(Desert.jpg) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin: 0;
padding: 0;
}
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
Found an easier way to set it. Here's the html and css:
<style>
#body {
*background: url(../Images/abcd.jpg) no-repeat center center fixed; /* For IE 6 and 7 */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body id="body">
<nav class="navbar navbar-default" id="navColour">
<div class="container-fluid">
<div class="navbar-header">
<a id="clr" class="navbar-brand" href="#">Summer Haze Festival</a>
</div>
<div>
<ul class="nav navbar-nav" >
<li id="clr" class="active"><a href="#">Home</a></li>
<li id="clr"><a href="#">Page 1</a></li>
<li id="clr"><a href="#">Page 2</a></li>
<li id="clr"><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
</body>
url(../Images/abcd.jpg) being the image stored in your solution in a folder called Images. Hope it helps. Note: I used the id "body" because the navigation bar was somehow overriding my background image.
Some answers already pointed out background-size: cover is useful in the case, but none points out the browser support details. Here it is:
Add this CSS into your stylesheet:
body {
background: url(background.jpg) no-repeat center center fixed;
background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
-webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
-moz-background-size: cover; /* optional for Firefox 3.6 */
-o-background-size: cover; /* for Opera 9.5 */
margin: 0; /* to remove the default white margin of body */
padding: 0; /* to remove the default white margin of body */
}
-moz-background-size: cover; is optional for Firefox, as Firefox starts supporting the value cover since version 3.6. If you need to support Konqueror 3.5.4+ as well, add -khtml-background-size: cover;.
As you're using CSS3, it's suggested to change your DOCTYPE to HTML5. Also, HTML5 CSS Reset stylesheet is suggested to be added BEFORE your our stylesheet to provide a consistent look & feel for modern browsers.
Reference: background-size at MDN
If you ever need to support old browsers like IE 8 or below, you can still go for Javascript way (scroll down to jQuery section)
Last, if you predict your users will use mobile phones to browse your website, do not use the same background image for mobile web, as your desktop image is probably large in file size, which will be a burden to mobile network usage. Use media query to branch CSS.
body
{
position: fixed; /*fixes the image in background*/
top: 0; /*fixes the image at top*/
left: 0; /*fixes the image at left*/
min-width: 100%; /*fixes the image width to 100% of screen*/
min-height: 100%; /*fixes the image height to 100% of screen*/
}
use background size: cover property . it will be full screen .
body{
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
I encounter same trouble as you, this is my solution.
body {
background-image: url(image/background.jpg);
background-size: 100% 100%;
}
Source: Stackoverflow.com