Try it Live

<!DOCTYPE html>
<html>
  <head>
    <style>
     .fixed-bg {
	  top:10px;
	  background-image:url("https://i.ibb.co/DG9BNqj/bird-two.png");
      width: 250px;
      height: 200px;
      background-repeat: no-repeat;
	  background-position:0px 50px;
	  background-color:orange;
	  text-align:left;
	  overflow:hidden;
      background-attachment: fixed;
      color:crimson;
      font-size:20px;
	  padding-left:205px;
	  border:2px solid black;
     }
     .scroll-bg {
	  background-image:url("https://i.ibb.co/DG9BNqj/bird-two.png");
      width: 250px;
      height: 340px;
	  overflow:auto;
      background-repeat: no-repeat;
	  background-color:green;
	  text-align:left;
      background-attachment: scroll;
      color:white;
      font-size:20px;
	  padding-left:205px;
	  border:2px solid black;
     }
     .local-bg {
	  background-image:url("https://i.ibb.co/DG9BNqj/bird-two.png");
      width: 250px;
      height: 200px;
      background-repeat: no-repeat;
	  background-color:yellow;
	  overflow:auto;
	  text-align:left;
      background-attachment: local;
      color:black;
      font-size:20px;
	  padding-left:205px;
	  border:2px solid black;
     }
    </style>
  </head>
  <body>
    <p><b><u>Note</u></b>: Read the content written here properly and understand the meaning</p>
    <div class="main">
     <div class="fixed-bg">
      <b><u>background-attachment:fixed</u></b>: The background image will be fixed even on scroll.
	  Try to scroll and you will notice that the image will be fixed while the content will scroll.
     </div>
     <div class="scroll-bg">
      <b><u>background-attachment:scroll</u></b>: The background image will also scroll with the page in case you scroll the page up or down.
	  Try to scroll the page and you will notice that the image will also scroll along with the page but it is not mandatory that it will scroll along with the content if the content overflows. In this case, if you scroll the content inside the div, the background image will not scroll. So, place your mouse cursor outside the div and the background image will scroll but if you place your cursor inside the div, the background image will not scroll.
	 </div> 
	 <div class="local-bg">
      <b><u>background-attachment:local</u></b>: The background image will also scroll with the content in case you scroll up or down.
	  Try to scroll and you will notice that the image will also scroll along with the content. Just keep your mouse cursor inside the div and try to scroll, you will notice that the background image will scroll along with the content.
     </div>
    </div>	
  </body>
</html>