【】About the problem of white edges in css background._html/css_WEB-ITnose

当我使用背景图片时，无论怎么调整，总是无法横向铺满整个屏幕。
但是我使用背景颜色时，总是能横向铺满整个屏幕。
下面是代码和运行效果：
1，使用背景图片
代码：
<%@page language="java" import="java.util.*,java.sql.*,java.text.SimpleDateFormat" pageEncoding="gb2312" %>

    
  
  
  <%
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/final","root","aaaa8888");
Statement stat=conn.createStatement();
String sql;
%>

    

    

style="width:100%; height:30%">
    



                       用户名

                       

                       密码    


                       
                       
                       

                       
    

    
  

  


效果：



2，使用背景颜色
代码：
<%@page language="java" import="java.util.*,java.sql.*,java.text.SimpleDateFormat" pageEncoding="gb2312" %>

    
  
  
  <%
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/final","root","aaaa8888");
Statement stat=conn.createStatement();
String sql;
%>

    

    

style="width:100%; height:30%">
    



                       用户名

                       

                       密码    


                       
                       
                       

                                                                                 document. login.username.value;
password=document.login.password.value;
if(username==""){
alert("Username cannot be empty");
document. Login.username.focus();
return;
}
else if(password==""){
alert("Password cannot be empty");
document.Login. password.focus();
return;
}
document.login.submit();
}


function b(){
window.location .href="zc.jsp";
}





Effect:





Reply to discussion (solution)

Here background-repeat: repeat-y; should be repeat- x;x is horizontal. . .

<style type="text/css">   #d1{   background-image: url(css1.png);   background-repeat: repeat-y;   position:fixed;    right:0px;   top:300px;   }   </style>

Here background-repeat: repeat-y; should be repeat-x; x is horizontal. . .

<style type="text/css">   #d1{   background-image: url(css1.png);   background-repeat: repeat-y;   position:fixed;    right:0px;   top:300px;   }   </style>

3q! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Solved, but why the picture is not coherent, the latter part is cut off from the front and spliced ​​to the back

Here background-repeat : repeat-y; should be repeat-x; x is horizontal. . .

<style type="text/css">   #d1{   background-image: url(css1.png);   background-repeat: repeat-y;   position:fixed;    right:0px;   top:300px;   }   </style>

3q! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Solved, but why is the picture not coherent? The latter part is cut off from the front and spliced ​​to the back.

The picture is smaller than the width of the browser. . . This involves image stretching. . .
The poster can try background-size:cover stretched image

Here background-repeat: repeat -y; should be repeat-x; x is horizontal. . .

<style type="text/css">   #d1{   background-image: url(css1.png);   background-repeat: repeat-y;   position:fixed;    right:0px;   top:300px;   }   </style>

3q! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Solved, but why is the picture not coherent? The latter part is cut off from the front and spliced ​​to the back.

The picture is smaller than the width of the browser. . . This involves image stretching. . .
The original poster can try background-size:cover to stretch the image
Thank you, God! Perfect solution! ! ! ! ! ! ! ! ! ! ! ! ! ! !