Mak*_*ake 3 html css jsp background
我已经创建了一个简单的登录页面并将图像设置为背景但它不适合浏览器屏幕.我正在使用html,我应该做什么使图像适合浏览器屏幕.请详细描述.
<%@ 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>
Run Code Online (Sandbox Code Playgroud)
Kie*_*uca 13
您可以通过创建.css文件并<head>在</title>(关闭标题标记)之后链接到您的标记来实现您想要的效果.
高分辨率图像将很好用,大约2112x1584像素但考虑文件大小,因为它对页面加载时间很重要.
在打开<body>标签时,只需删除背景属性,因为它将通过.css文件声明.
图像准备就绪后,将此代码放入.css文件中
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;
}
Run Code Online (Sandbox Code Playgroud)
完成.css文件后,您可以将其链接到<head>标记.它看起来像这样:<link rel="stylesheet" type="text/css" href="yourCSSpath/yourCSSname.css" />
这就是我如何制作适合浏览器屏幕的背景图像.