Menu
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>
867
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.
116
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;
}
here is fiddle link
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
