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

当我使用背景图片时，无论怎么调整，总是无法横向铺满整个屏幕。
但是我使用背景颜色时，总是能横向铺满整个屏幕。
下面是代码和运行效果：
1，使用背景图片
代码：
9129e9107749a5052d938f50f448324b
100db36a723c770d327fc0aef2ce13b1
    46d5fe1c7617e3914f214aaf043f4ccf
   #d1{
   background-image: url(css1.png);
   background-repeat: repeat-y;
   position:fixed; 
   right:0px;
   top:300px;

   }
   531ac245ce3e4fe3d50054a55f265927
  
  36613f7b712078c5ce6a846caa1a9f95
  6c0fb9c8ecc089f0f4d49f0553d477c1

    1e25cd1bacf487f38d078dd47309d847
    2348e3a06a9b1bef187940b8c0df4f6a
    0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
                       用户名65c66f718e7553c00f08c9ee5fc59a5f0c6dc11e160d3b678d68754cc175188a
                       0c6dc11e160d3b678d68754cc175188a
                       密码    c5956f77ce1de04ac80d4a62707969bf0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
                       e656cafeec46c8d56fff8792111076e7
                       5b3166500fdfb15499b138a09566e753
                       16b28748ea4df4d9c2150843fecfba68
                       
    f5a47148e367a6035fd7a2faa965022e
    adca8a5fa06ffeafb062c2e3f274b930
  8019067d09615e43c7904885b5246f0a
  function f(){
  username=document.login.username.value;
  password=document.login.password.value;
  if(username==""){
  alert("用户名不能为空");
  document.Login.username.focus();
  return;
  }
  else if(password==""){
  alert("密码不能为空");
  document.Login.password.focus();
  return;
  }
  document.login.submit();
  }
  
  
  function b(){
  window.location.href="zc.jsp";
  }
  2cacc6d41bbb37262a98f745aa00fbf0

  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

效果：



2，使用背景颜色
代码：
9129e9107749a5052d938f50f448324b
100db36a723c770d327fc0aef2ce13b1
    46d5fe1c7617e3914f214aaf043f4ccf
   #d1{
   background-color:blue;
   background-repeat: repeat-y;
   position:fixed; 
   right:0px;
   top:300px;

   }
   531ac245ce3e4fe3d50054a55f265927
  
  36613f7b712078c5ce6a846caa1a9f95
  6c0fb9c8ecc089f0f4d49f0553d477c1

    1e25cd1bacf487f38d078dd47309d847
    2348e3a06a9b1bef187940b8c0df4f6a
    0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
                       用户名65c66f718e7553c00f08c9ee5fc59a5f0c6dc11e160d3b678d68754cc175188a
                       0c6dc11e160d3b678d68754cc175188a
                       密码    c5956f77ce1de04ac80d4a62707969bf0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
                       e656cafeec46c8d56fff8792111076e7
                       5b3166500fdfb15499b138a09566e753
                       16b28748ea4df4d9c2150843fecfba68
                                                                                 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";
}
2cacc6d41bbb37262a98f745aa00fbf0

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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! ! ! ! ! ! ! ! ! ! ! ! ! ! !