Repeating Background?? help!

For some reason my background decides to give a background to my other text and content? Does anyone know how to fix this!!
The actual photo is a functioning repeating background and does work, however it is making a 2nd background, basically??

grrr

Pretty sure it has something to do with my style sheet!!

Code

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> tha blog :smile: </title>
   <link rel="icon" href="favicon.png">
   <style>	
     html,body{
     min-height:100%;
     background-image: url("https://sadhost.neocities.org/images/tiles/rrbg.gif":wink:;
    background-color: #cccccc;
     }
     h1,h2,h3{
     color:red;
     text-shadow:4px 4px 6px brown;
     letter-spacing:2px;
     text-indent:50px;
     }
     a{
     color:red;
     text-decoration:underline;
     }
     a:hover{
     color:blue;
     text-decoration:none;
     }
     b{
     color:hotpink;
     }
     i{
     color:blueviolet;
     }
     u{
     color:omg:range;
     font-weight:bold;
     }
     textarea{
     background:cornsilk;
     font-family:georgia,times,serif;
     width:100%;
     height:200px;
     }
     p {
     text-align:justify;
     margin:10px 42px;
     text-indent:25px;
     color:yellow;
     }
     img {
	   float: center
   	margin: 5px;
	   }
     .content{
     background: rgba(0, 0, 0, 0.5);
     margin:20px auto;
     min-width:80%;
     max-width:90%;
     padding:25px;
     color:black;
     font-family:times;
     font-size:25px;
     line-height:120%;
     }
     .center {
     text-align:center;
     padding:20px;
     }
     .center > p {
     color:yellow;
     text-align:center;
     }

     .image1 {
     display:block;
     max-width:99%;
     height:auto;
     margin-left:auto;
     margin-right:auto;
     border:4px solid darkslateblue;
     box-shadow:8px 8px pink;
     }
 
   </style>