关于JavaWeb网页背景图片为什么没有随着窗口大小而改变的问题

我现在要用javaee,也就是javaweb。我想给我的网页添加一张背景图片,背景图片的大小是小于窗口的大小的。我按照下面的代码写了。


<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
int port=request.getServerPort();
    
    if(port==80){
    basePath=request.getScheme()+"://"+request.getServerName()+path;
    
    }else{
        basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
        
    }
    request.setAttribute("basePath", basePath);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
  </head>
  
  <body class='ban' style="height:document.body.clientHeight;width:document.body.clientWidth;background-image:url('${basePath}/img/pink.jpg')">
     <a href="${basePath}/Login.jsp">登录</a>
    <a href="${basePath}/Register.jsp">注册</a>
  </body>
</html>

结果变成这样子

img

发现我要的背景图片并没有随着窗口的大小自动的放大或者缩小,而是按照图片的实际大小分成了一块一块的,要怎么样才能使图片随着窗口的大小改变自动改变它的大小,而不是按照实际大小一块一块拼接呢?


background-position: center;//背景位置:居中
background-size: cover;//背景大小,等比例缩放铺满不留白(会丢失图片)
background-repeat: no-repeat;//背景平铺:不平铺

background-size:cover
后面值可根据自己定,看你的需求,

background-repeat:no-repeat;
background-size:100% 100%; //这里用cover可行,好处是图片不会变形,缺点是图片可能会显示不全

设置background-size为cover(可自定义)
希望对题主有所帮助,望采纳!